Select

Is an alternative to the <select> element.

Common usage

Select must be wrapped with useSelect to make the element interactive. Using the component with a custom hook is encouraged.

import { Select, useSelect, styled } from '@atlasgroup/react-atlantic';
import { wrap } from '@atlasgroup/react-wrap';

// Optional
const ProjectSpecificStyledSelect = styled(Select)`
    // ... Project specific styles ...
`;

const ProjectSpecificSelect = wrap(ProjectSpecificStyledSelect, useSelect);

Basic usage

<Select options={options} />

Sizes

<WrapperHorizontal>
  <Select options={options} size="small" />
  <Select options={options} size="medium" />
  <Select options={options} size="large" />
</WrapperHorizontal>

Full width

<Select options={options} isFullWidth />

Other views

Multi

SelectMulti should be wrapped with useSelectMulti.

<SelectMulti options={options} />

Known issues

• [#1] - Unnecessary wrapping of the component in each project
• [#2] - The component is not accessible via keyboard (might be useful for accessibility)
• [#3] - Third party component is used