Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Select

    A single choice from a short closed list, opened from a trigger.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { Select } from '@bigbang/ui';
    Source
    Select.tsx
    Storybook
    Select · Playground

    Select is in the @bigbang/ui package. The option type is exported as SelectItem.

    import { Select, type SelectItem } from '@bigbang/ui';
    

    const items: SelectItem[] = [
      { value: 'one', label: 'First option' },
      { value: 'two', label: 'Second option' },
    ];
    

    <Select label="Field label" items={items} placeholder="Choose" value={value} onValueChange={setValue} />;

    Props

    Section titled “Props”
    labelRequired
    Description
    The visible label, bound to the trigger. A placeholder does not replace it.
    Type
    string
    itemsRequired
    Description
    The options, in the order they are listed; a { label, items } entry is a group with a heading, set apart by separators. Keep the list short (about 15); a longer list needs search.
    Type
    readonly (SelectItem | SelectItemGroup)[]
    placeholder
    Description
    Text on the trigger while nothing is chosen, such as "Seçin" or "Choose".
    Type
    string
    description
    Description
    Help text under the field, linked with aria-describedby before the error.
    Type
    ReactNode
    error
    Description
    When set, the field is invalid and the message is read with the trigger.
    Type
    string
    invalid
    Description
    Marks the field invalid without a message, for example when the message is in an error summary.
    Type
    boolean
    Default
    false
    required
    Description
    A choice is required: the label gets * with a visually hidden "zorunlu" or "required".
    Type
    boolean
    Default
    false
    necessityIndicator
    Description
    Which fields the form marks: 'required' marks required fields, 'optional' adds "(isteğe bağlı)" or "(optional)" to the others.
    Type
    'required' | 'optional'
    Default
    'required'
    size
    Description
    Trigger height: 32, 36 or 40 px, as TextInput.
    Type
    'sm' | 'md' | 'lg'
    Default
    'md'
    fullWidth
    Description
    Stretches the trigger to the width of the field. Without it the trigger fits its value, as in the shadcn reference.
    Type
    boolean
    Default
    false
    readOnly
    Description
    The value is shown and submitted but the list does not open.
    Type
    boolean
    Default
    false
    disabled
    Description
    Disables the field and its label; the value is not submitted.
    Type
    boolean
    Default
    false
    name
    Description
    Field name used when the form is submitted.
    Type
    string
    value
    Description
    The chosen value when you control it; null for none. Use it with onValueChange.
    Type
    string | null
    defaultValue
    Description
    The chosen value on first render when you do not control it.
    Type
    string | null
    onValueChange
    Description
    Called with the new value when the user chooses an option.
    Type
    (value: string | null) => void
    multiple
    Description
    Lets the user choose several options; the list stays open while they choose, and the trigger lists the chosen labels. Use values, defaultValues and onValuesChange instead of the single-value props.
    Type
    boolean
    Default
    false
    values
    Description
    The chosen values of a multiple select when you control them. Use it with onValuesChange.
    Type
    readonly string[]
    defaultValues
    Description
    The chosen values of a multiple select on first render when you do not control them.
    Type
    readonly string[]
    onValuesChange
    Description
    Called with all chosen values of a multiple select when the user picks or clears an option.
    Type
    (values: string[]) => void
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string
    material
    Description
    'solid' keeps the list solid under a glass Provider. The field itself is always solid.
    Type
    'auto' | 'solid'
    Default
    'auto'

    Data attributes

    Section titled “Data attributes”
    • data-component="select": on the root element.
    • data-part: label, trigger, popup, item, group, group-label, separator, scroll-up, scroll-down, description, error.
    • data-popup-open (trigger), data-highlighted and data-selected (option): from Base UI.