Components

NativeSelect

The browser's own select list, in a closed field that looks like Select.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { NativeSelect } from '@bigbang/ui';
Source: NativeSelect.tsx
Storybook: NativeSelect · Playground

NativeSelect is in the @bigbang/ui package. The option types are exported as NativeSelectOption and NativeSelectOptionGroup.

import { NativeSelect } from '@bigbang/ui';

<NativeSelect
  label="Country"
  name="country"
  placeholder="Choose"
  options={[
    { value: 'tr', label: 'Türkiye' },
    { value: 'de', label: 'Germany' },
  ]}
  value={value}
  onValueChange={setValue}
/>;

Props

labelRequired

Description: The visible label of the field, bound to the select with <label>.
Type: string

optionsRequired

Description: The options, flat or in groups.
Type: readonly NativeSelectOption[] | readonly NativeSelectOptionGroup[]

placeholder

Description: Text of an empty first option shown while nothing is chosen. It cannot be chosen again once a value is set when required.
Type: string

description

Description: Help text under the field, linked with aria-describedby.
Type: ReactNode

error

Description: When set, the field is marked invalid and the message is read with the select.
Type: string

invalid

Description: Marks the field invalid without a message.
Type: boolean
Default: false

required

Description: A value is required: the select gets required and the label gets *.
Type: boolean
Default: false

necessityIndicator

Description: Which fields the form marks, as in TextInput.
Type: 'required' | 'optional'
Default: 'required'

size

Description: Control height: 32, 36 and 40 px, as TextInput.
Type: 'sm' | 'md' | 'lg'
Default: 'md'

disabled

Description: Disables the field and its label.
Type: boolean
Default: false

name

Description: Field name used when the form is submitted.
Type: string

value

Description: Controlled value. Pass it with onValueChange.
Type: string

defaultValue

Description: Initial value when the field is uncontrolled.
Type: string

onValueChange

Description: Called with the new value when the user chooses an option.
Type: (value: string, event: ChangeEvent<HTMLSelectElement, Element>) => void

className

Description: Added to the root element; use it for layout only.
Type: string

Data attributes

data-component="native-select": on the root.
data-part: box, control, chevron.