sigpro-ui/docs/components/select.md

Select

Dropdown select component with full DaisyUI styling, reactive items, and form integration.

Tag

Select

Props

Prop	Type	Default	Description
label	string	-	Label text above select
items	Array<{value: string, label: string}> | Signal<Array>	[]	Array of items with value and label
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

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 Select({
    label: 'Choose a fruit',
    items: [
      { value: 'apple', label: '🍎 Apple' },
      { value: 'banana', label: '🍌 Banana' },
      { value: 'orange', label: '🍊 Orange' },
      { value: 'grape', label: '🍇 Grape' }
    ],
    value: selected,
    onchange: (e) => selected(e.target.value)
  });
};
Mount(BasicDemo, '#demo-basic');

With Reactive Display

Live Demo

const ReactiveDemo = () => {
  const selected = $('small');
  return Div({ class: 'flex flex-col gap-4 w-full' }, [
    Select({
      label: 'Select size',
      items: [
        { value: 'small', label: 'Small' },
        { value: 'medium', label: 'Medium' },
        { value: 'large', label: 'Large' }
      ],
      value: selected,
      onchange: (e) => selected(e.target.value)
    }),
    Div({ class: 'alert alert-info' }, () => `You selected: ${selected()}`)
  ]);
};
Mount(ReactiveDemo, '#demo-reactive');

Disabled State

Live Demo

const DisabledDemo = () => {
  return Select({
    label: 'Country (disabled)',
    items: [
      { value: 'mx', label: 'Mexico' },
      { value: 'us', label: 'United States' },
      { value: 'ca', label: 'Canada' }
    ],
    value: 'mx',
    disabled: true
  });
};
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' }, [
    Select({
      label: 'Category',
      items: [
        { value: 'fruits', label: 'Fruits' },
        { value: 'vegetables', label: 'Vegetables' }
      ],
      value: category,
      onchange: (e) => {
        category(e.target.value);
        selectedItem('');
      }
    }),
    Select({
      label: 'Item',
      items: () => items[category()] || [],
      value: selectedItem,
      onchange: (e) => selectedItem(e.target.value)
    }),
    () => 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' }, [
    Select({
      label: 'Primary Select',
      class: 'select-primary',
      items: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ],
      value: primary,
      onchange: (e) => primary(e.target.value)
    }),
    Select({
      label: 'Secondary Select',
      class: 'select-secondary',
      items: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
      ],
      value: secondary,
      onchange: (e) => secondary(e.target.value)
    }),
    Select({
      label: 'Ghost Select',
      class: 'select-ghost',
      items: [
        { value: '', label: 'Select an option' },
        { value: 'opt1', label: 'Option 1' },
        { value: 'opt2', label: 'Option 2' }
      ],
      value: ghost,
      onchange: (e) => ghost(e.target.value)
    })
  ]);
};
Mount(VariantsDemo, '#demo-variants');