Select

A pressable field that opens a bottom sheet of options. Fully controlled via value and onChange.

Basic usage

Fruit

function SelectDemo() {
  const [value, setValue] = useState('apple');

  return (
    <Select
      label="Fruit"
      placeholder="Choose a fruit…"
      value={value}
      onChange={setValue}
      options={[
        { label: 'Apple', value: 'apple' },
        { label: 'Banana', value: 'banana' },
        { label: 'Cherry', value: 'cherry' },
      ]}
    />
  );
}

Invalid & disabled

Country

This field is required

<Select
  label="Country"
  placeholder="Select a country…"
  value={value}
  onChange={setValue}
  isInvalid
  errorText="This field is required"
  options={[
    { label: 'India', value: 'in' },
    { label: 'USA', value: 'us' },
  ]}
/>

Custom icons

By default the trigger shows a plain ▲/▼ glyph and the selected option shows a plain ✓ glyph. Pass icon and checkIcon to use real icons instead: either accepts any component matching TVajraIconComponent.

Fruit

import { ChevronDownIcon, CheckIcon } from '@devraj-labs/vajra-ui-icons';

<Select
  label="Fruit"
  value={value}
  onChange={setValue}
  icon={ChevronDownIcon}
  checkIcon={CheckIcon}
  options={options}
/>

Props

Prop	Type	Default	Description
options	{ label: string; value: TValue }[]		Required. List of selectable options.
value	TValue		Currently selected value.
onChange	(value: TValue) => void		Required. Called when an option is selected.
placeholder	string	'Select…'	Text shown when nothing is selected.
label	string		Label rendered above the field.
errorText	string		Helper text shown below the field when isInvalid.
isInvalid	boolean	false	Renders the field with an error border and shows errorText.
isDisabled	boolean	false	Disables interaction and dims opacity.
selectedColor	TVajraColors	'primary'	Highlight color for the selected option in the sheet.
icon	TVajraIconComponent		Icon shown at the trailing edge of the trigger, rotated between open/closed state. Defaults to a plain ▲/▼ glyph.
checkIcon	TVajraIconComponent		Icon shown next to the selected option in the sheet. Defaults to a plain ✓ glyph.
testID	string		Test identifier.