@wecareu/select

Controlled select component for the WeCareU Design System. Supports single and multiple selection with modal bottom sheet, search, chips display, and full validation feedback.

Installation

npm install @wecareu/select
# or
yarn add @wecareu/select

Peer Dependencies

npm install @wecareu/icons @wecareu/theme @wecareu/tokens react react-native

Usage

Single Select

import { Select } from '@wecareu/select'

const GENDER_OPTIONS = [
  { label: 'Female', value: 'F' },
  { label: 'Male', value: 'M' },
  { label: 'Prefer not to say', value: 'X' }
]

function GenderPicker() {
  const [gender, setGender] = React.useState<string | null>(null)

  return (
    <Select
      options={GENDER_OPTIONS}
      value={gender}
      onChange={setGender}
      placeholder="Select gender"
      clearable
    />
  )
}

Single Select with Search (large list)

import { Select } from '@wecareu/select'

function CountryPicker() {
  const [country, setCountry] = React.useState<string | null>(null)

  return (
    <Select
      options={countries}
      value={country}
      onChange={setCountry}
      placeholder="Select country"
      searchable
      clearable
    />
  )
}

Multiple Select

import { Select } from '@wecareu/select'

function TagsPicker() {
  const [tags, setTags] = React.useState<string[]>([])

  return (
    <Select
      multiple
      options={tagOptions}
      value={tags}
      onChange={setTags}
      placeholder="Select tags"
      clearable
    />
  )
}

With Validation

import { Select } from '@wecareu/select'

function ValidatedSelect() {
  const [value, setValue] = React.useState<string | null>(null)
  const [isValid, setIsValid] = React.useState(true)

  return (
    <Select
      options={options}
      value={value}
      onChange={setValue}
      required
      inputError={!isValid}
      errorMessage="This field is required"
      onValidation={setIsValid}
      placeholder="Select an option"
    />
  )
}

Props

SelectOption

| Prop | Type | Required | Description | |------|------|----------|-------------| | value | string \| number | Yes | Unique identifier for the option | | label | string | Yes | Display text | | description | string | No | Secondary text shown below label | | icon | IconName | No | Icon from @wecareu/icons | | disabled | boolean | No | Prevents selection |

Select (Single)

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string \| number \| null | — | Selected value | | onChange | (value: string \| number \| null) => void | — | Called on selection change | | options | SelectOption[] | — | List of options | | placeholder | string | 'Select...' | Placeholder text | | clearable | boolean | false | Shows clear button | | searchable | boolean | false | Enables search inside dropdown | | disabled | boolean | false | Blocks interaction | | readonly | boolean | false | Blocks interaction (read-only visual) | | required | boolean | false | Enables required validation | | inputError | boolean | false | Forces error state with shake animation | | errorMessage | string | — | Message shown in error state | | onValidation | (isValid: boolean) => void | — | Validation callback | | leftIcon | SelectIconProps | — | Icon on the left side | | style | StyleProp<ViewStyle> | — | Container style override | | testID | string | — | Test identifier |

Select (Multiple)

Same as single select, plus:

| Prop | Type | Default | Description | |------|------|---------|-------------| | multiple | true | — | Enables multiple selection | | value | Array<string \| number> | — | Selected values | | onChange | (values: Array<string \| number>) => void | — | Called on selection change |

Accessibility

• accessibilityRole="combobox" on the field
• accessibilityState={{ disabled, expanded }} reflects open state
• Each option has accessibilityRole="option" with selected state
• Modal has accessibilityViewIsModal set
• Chips have accessible remove buttons

Theme Integration

The component uses @wecareu/theme tokens for all colors, spacing, radius, and typography. It supports both light and dark modes automatically through useTheme().