Select

Choose me.

Example

Props

    🕹ī¸ standard props
    options
    Option[]
    List of options available in the select dropdown.
    undefined
    name
    string
    Name of the select input.
    undefined
    value
    string | number
    The selected value of the select input.
    undefined
    disabled
    boolean
    Disables the select input if true.
    false
    placeholder
    string
    Placeholder text when no option is selected.
    undefined
    optionAttributes
    HTMLOptionAttributes
    Additional attributes for the option elements.
    undefined
    🎨 style props
    --select-border
    border
    Border of the select input.
    1.3px solid rgb(var(--global-color-contrast-300), .3)
    --select-active-border-color
    color
    Border color when the select is active.
    rgb(var(--global-color-primary-500))
    --option-border-color
    color
    Border color of each option.
    rgb(var(--global-color-contrast-200))
    --option-background-color
    color
    Background color of each option.
    rgb(var(--global-color-background-200))
    --option-color
    color
    Text color of each option.
    rgb(var(--global-color-contrast-700))
    --select-border-radius
    size
    Border radius of the select input.
    5px
    --select-padding-right
    size
    Right padding of the select input.
    5px
    --select-padding-left
    size
    Left padding of the select input.
    5px
    --select-background-color
    color
    Background color of the select input.
    transparent
    --select-color
    color
    Text color of the select input.
    rgb(var(--global-color-contrast-900))
    --select-width
    size
    Width of the select input.
    100%
    --select-height
    size
    Height of the select input.
    36px

Slots

    No data available

Events

    onchange
    Triggered when the selected value changes.