Skip to main content

Select

Inputs & ControlsBETA

Select

Next-gen select experience with chips, multi-select, and context providers.

Usage

Offer tokenized, multi-value selections with advanced filtering.

Highlights

  • Context-driven architecture
  • Reusable Trigger, Value, Group, Option slots

When to use it

  • Need multi-select chips or custom rendered values.
  • Integrating with async data and virtualization.

Related components

Chip

Examples​

Single Select​

Preview (Web)
import { Select } from 'react-native-molecules/components/Select';

const options = [
  { id: 1, label: 'Option 1' },
  { id: 2, label: 'Option 2' },
  { id: 3, label: 'Option 3' },
];

export default function Example() {
  return (
      <Select options={options} labelKey="label">
          <Select.Trigger>
              <Select.Value placeholder="Select an option" />
          </Select.Trigger>
          <Select.Dropdown>
              <Select.Content>
                  {(item, isSelected) => (
                      <Select.Option key={item.id} value={item.id}>
                          {item.label}
                      </Select.Option>
                  )}
              </Select.Content>
          </Select.Dropdown>
      </Select>
  );
}

Multi Select​

Preview (Web)
import { Select } from 'react-native-molecules/components/Select';

const options = [
  { id: 1, label: 'Option 1' },
  { id: 2, label: 'Option 2' },
  { id: 3, label: 'Option 3' },
];

export default function Example() {
  return (
      <Select multiple options={options} labelKey="label">
          <Select.Trigger>
              <Select.Value placeholder="Select multiple options" />
          </Select.Trigger>
          <Select.Dropdown>
              <Select.Content>
                  {(item, isSelected) => (
                      <Select.Option key={item.id} value={item.id}>
                          {item.label}
                      </Select.Option>
                  )}
              </Select.Content>
          </Select.Dropdown>
      </Select>
  );
}
Preview (Web)
import { Select } from 'react-native-molecules/components/Select';

const options = [
  { id: 1, label: 'Apple' },
  { id: 2, label: 'Banana' },
  { id: 3, label: 'Cherry' },
  { id: 4, label: 'Date' },
];

export default function Example() {
  return (
      <Select options={options} labelKey="label">
          <Select.Trigger>
              <Select.Value placeholder="Search and select" />
          </Select.Trigger>
          <Select.Dropdown>
              <Select.SearchInput placeholder="Search options..." />
              <Select.Content>
                  {(item, isSelected) => (
                      <Select.Option key={item.id} value={item.id}>
                          {item.label}
                      </Select.Option>
                  )}
              </Select.Content>
          </Select.Dropdown>
      </Select>
  );
}