sigpro-ui/docs/components/select.md

Select

Dropdown select component with full DaisyUI styling and reactive options.

Tag

Select, Options

Select Props

Prop	Type	Default	Description
value	string | Signal<string>	''	Selected value
class	string	''	Additional CSS classes (DaisyUI + Tailwind)
disabled	boolean | Signal<boolean>	false	Disabled state
onchange	function	-	Change event handler

Options Props

Prop	Type	Default	Description
items	Array<string | {value, label}> | Signal<Array>	[]	Array of items (strings or objects)
placeholder	string	-	Optional placeholder option (disabled, selected)

Styling

Select supports all daisyUI Select classes:

Category	Keywords	Description
Color	select-primary, select-secondary, select-accent, select-info, select-success, select-warning, select-error	Select color variants
Size	select-xs, select-sm, select-md, select-lg	Select scale
Style	select-bordered (default), select-ghost	Visual style variants

For further details, check the daisyUI Select Documentation – Full reference for CSS classes.

Live Examples

Basic Select

Live Demo

const BasicDemo = () => {
  const selected = $('apple');
  
  return div({ class: 'form-control w-full max-w-xs' }, [
    label({ class: 'label' }, span({ class: 'label-text' }, 'Choose a fruit')),
    select({
      class: 'select select-bordered w-full',
      value: selected,
      onchange: (e) => selected(e.target.value)
    }, [
      Options({
        items: [
          { value: 'apple', label: '🍎 Apple' },
          { value: 'banana', label: '🍌 Banana' },
          { value: 'orange', label: '🍊 Orange' },
          { value: 'grape', label: '🍇 Grape' }
        ]
      })
    ])
  ]);
};
mount(BasicDemo, '#demo-basic');

With Reactive Display

Live Demo

const ReactiveDemo = () => {
  const selected = $('small');
  return div({ class: 'flex flex-col gap-4 w-full' }, [
    div({ class: 'form-control w-full max-w-xs' }, [
      label({ class: 'label' }, span({ class: 'label-text' }, 'Select size')),
      select({
        class: 'select select-bordered w-full',
        value: selected,
        onchange: (e) => selected(e.target.value)
      }, [
        Options({
          items: [
            { value: 'small', label: 'Small' },
            { value: 'medium', label: 'Medium' },
            { value: 'large', label: 'Large' }
          ]
        })
      ])
    ]),
    div({ class: 'alert alert-info' }, () => `You selected: ${selected()}`)
  ]);
};
mount(ReactiveDemo, '#demo-reactive');

Disabled State

Live Demo

const DisabledDemo = () => {
  return div({ class: 'form-control w-full max-w-xs' }, [
    label({ class: 'label' }, span({ class: 'label-text' }, 'Country (disabled)')),
    select({
      class: 'select select-bordered w-full',
      value: 'mx',
      disabled: true
    }, [
      Options({
        items: [
          { value: 'mx', label: 'Mexico' },
          { value: 'us', label: 'United States' },
          { value: 'ca', label: 'Canada' }
        ]
      })
    ])
  ]);
};
mount(DisabledDemo, '#demo-disabled');

Dynamic Items

Live Demo

const DynamicDemo = () => {
  const category = $('fruits');
  const selectedItem = $('');
  
  const items = {
    fruits: [
      { value: 'apple', label: '🍎 Apple' },
      { value: 'banana', label: '🍌 Banana' }
    ],
    vegetables: [
      { value: 'carrot', label: '🥕 Carrot' },
      { value: 'broccoli', label: '🥦 Broccoli' }
    ]
  };
  
  return div({ class: 'flex flex-col gap-4 w-full' }, [
    div({ class: 'form-control w-full max-w-xs' }, [
      label({ class: 'label' }, span({ class: 'label-text' }, 'Category')),
      select({
        class: 'select select-bordered w-full',
        value: category,
        onchange: (e) => {
          category(e.target.value);
          selectedItem('');
        }
      }, [
        Options({
          items: [
            { value: 'fruits', label: 'Fruits' },
            { value: 'vegetables', label: 'Vegetables' }
          ]
        })
      ])
    ]),
    div({ class: 'form-control w-full max-w-xs' }, [
      label({ class: 'label' }, span({ class: 'label-text' }, 'Item')),
      select({
        class: 'select select-bordered w-full',
        value: selectedItem,
        onchange: (e) => selectedItem(e.target.value)
      }, [
        Options({
          items: () => items[category()] || []
        })
      ])
    ]),
    () => selectedItem() ? div({ class: 'alert alert-success' }, `Selected: ${selectedItem()}`) : null
  ]);
};
mount(DynamicDemo, '#demo-dynamic');

All Variants

Live Demo

const VariantsDemo = () => {
  const primary = $('option1');
  const secondary = $('option2');
  const ghost = $('');
  
  return div({ class: 'flex flex-col gap-4' }, [
    div({ class: 'form-control w-full max-w-xs' }, [
      label({ class: 'label' }, span({ class: 'label-text' }, 'Primary Select')),
      select({
        class: 'select select-primary w-full',
        value: primary,
        onchange: (e) => primary(e.target.value)
      }, [
        Options({
          items: [
            { value: 'option1', label: 'Option 1' },
            { value: 'option2', label: 'Option 2' },
            { value: 'option3', label: 'Option 3' }
          ]
        })
      ])
    ]),
    div({ class: 'form-control w-full max-w-xs' }, [
      label({ class: 'label' }, span({ class: 'label-text' }, 'Secondary Select')),
      select({
        class: 'select select-secondary w-full',
        value: secondary,
        onchange: (e) => secondary(e.target.value)
      }, [
        Options({
          items: [
            { value: 'option1', label: 'Option 1' },
            { value: 'option2', label: 'Option 2' }
          ]
        })
      ])
    ]),
    div({ class: 'form-control w-full max-w-xs' }, [
      label({ class: 'label' }, span({ class: 'label-text' }, 'Ghost Select')),
      select({
        class: 'select select-ghost w-full',
        value: ghost,
        onchange: (e) => ghost(e.target.value)
      }, [
        Options({
          placeholder: 'Select an option',
          items: [
            { value: 'opt1', label: 'Option 1' },
            { value: 'opt2', label: 'Option 2' }
          ]
        })
      ])
    ])
  ]);
};
mount(VariantsDemo, '#demo-variants');