Select

Select allows the user to pick a value from a list of options. Supports labels, validation, helper text, and reactive state binding.

Basic Examples

Simple selects with various configurations

// Dynamic import of the Select component

const { default: Select } = await import('/components/data-input/select.js');

const { tags, $ } = Lightview;
const { div } = tags;

// 1. Basic select with string options
const basic = Select({ 
    placeholder: 'Pick a movie franchise',
    options: ['Star Wars', 'Harry Potter', 'Lord of the Rings', 'Marvel']
});

// 2. Select with label and helper
const withLabel = Select({ 
    label: 'Country',
    placeholder: 'Select your country',
    options: [
        { value: 'us', label: 'United States' },
        { value: 'uk', label: 'United Kingdom' },
        { value: 'ca', label: 'Canada' },
        { value: 'au', label: 'Australia' }
    ],
    helper: 'We use this for shipping calculations'
});

// 3. Required select with color
const required = Select({ 
    label: 'Priority',
    placeholder: 'Select priority...',
    options: ['Low', 'Medium', 'High', 'Critical'],
    color: 'primary',
    required: true
});

// Insert all examples
$('#demo').insert(
    div({ class: 'space-y-4 max-w-md' }, basic, withLabel, required)
);

Reactive Example

Two-way binding with signals and live validation


const { default: Select } = await import('/components/data-input/select.js');

const { signal, tags, $ } = Lightview;
const { div, p, span } = tags;

// Signal for two-way binding
const selectedRole = signal('');

// Validation function
const validateRole = (val) => {
    if (!val) return 'Please select a role';
    return null;
};

// Role descriptions
const roleDescriptions = {
    admin: 'Full access to all features',
    editor: 'Can edit and publish content',
    viewer: 'Read-only access',
    guest: 'Limited access to public content'
};

// Reactive select with validation
const reactiveDemo = div({ class: 'space-y-4 max-w-md' },
    Select({ 
        label: 'User Role',
        placeholder: 'Assign a role...',
        value: selectedRole,
        options: [
            { value: 'admin', label: 'Administrator' },
            { value: 'editor', label: 'Editor' },
            { value: 'viewer', label: 'Viewer' },
            { value: 'guest', label: 'Guest' }
        ],
        validate: validateRole,
        required: true
    }),
    p({ class: 'text-sm' }, 
        () => {
            const role = selectedRole.value;
            if (!role) return span({ class: 'opacity-70' }, 'Select a role to see its description');
            return span({ class: 'text-primary' }, roleDescriptions[role]);
        }
    )
);

$('#demo').insert(reactiveDemo);

Props

Prop Type Default Description
options array [] Array of strings or objects {value, label, disabled}
value * | signal - Selected value (reactive with signals)
defaultValue * '' Default value for uncontrolled mode
placeholder string - Placeholder option (disabled first option)
label string - Label text displayed above select
helper string - Helper text displayed below the select
error string | function - Error message or reactive error function
validate function - Validation function: (value) => errorMessage | null
color string - 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
size string 'md' 'xs' | 'sm' | 'md' | 'lg'
ghost boolean false Ghost style (no background)
disabled boolean false Disable the select
required boolean false Mark as required field (shows asterisk)
onChange function - Callback when value changes: (value, event) => void
useShadow boolean * Render in Shadow DOM. *Follows global initComponents() setting

Sizes

Colors

With Label (Fieldset Pattern)

Country

Used for shipping calculations.

For more examples and styling options, see the DaisyUI Select documentation.