Installation

# install peer dependencies

# npm
$ npm install react react-dom @real-system/ariakit-library @real-system/elements-primitive @real-system/styled-library @real-system/utils-library
# yarn
$ yarn add react react-dom @real-system/ariakit-library @real-system/elements-primitive @real-system/styled-library @real-system/utils-library

# install select

# npm
$ npm install @real-system/select
# yarn
$ yarn add @real-system/select

Code Example

import {
  Select,
  SelectContainer,
  SelectGroup,
  SelectGroupLabel,
  SelectItem,
  SelectSeparator,
} from '@real-system/select';
import { Text } from '@real-system/typography';

const DefaultSelect = (args) => {
  return (
    <Select label="Select a fruit" maxW="20rem">
      <SelectItem value="Apple" />
      <SelectItem value="Grape" disabled />
      <SelectItem value="Melon" />
    </Select>
  );
};

const SelctGroupExample = (args) => {
  return (
    <Select label="Select a fruit" maxW="20rem">
      <SelectGroup>
        <SelectGroupLabel>Fruits</SelectGroupLabel>
        <SelectItem value="Apple" />
        <SelectItem value="Grape" disabled />
        <SelectItem value="Melon" />
      </SelectGroup>
      <SelectSeparator />
      <SelectGroup>
        <SelectGroupLabel>Vegatables</SelectGroupLabel>
        <SelectItem value="Lettuce" />
        <SelectItem value="Pepper" disabled />
        <SelectItem value="Onion" />
      </SelectGroup>
    </Select>
  );
};