Arctic Design
Get StartedFoundationsComponentsExamples
⌘K

Select

Enables users to choose a single option from a dropdown menu for streamlined selection.

npm logo@arctic-kit/snow
View source code
icon-storybook-default logoView storybook
Usage
Full Width
Searchable
Clearable
Size
Disabled
import { Select } from '@arctic-kit/snow';


function Demo() {
  return (
    <Select
      label="Colors" placeholder="Pick a value" fullWidth clearable color="primary" size="medium"
      options={[
        { label: 'Green', value: 'green' },
        { label: 'Blue', value: 'blue' },
        { label: 'Red', value: 'red' },
        { label: 'Yellow', value: 'yellow' },
        { label: 'Orange', value: 'orange' },
        { label: 'Pink', value: 'pink' },
        { label: 'Purple', value: 'purple' },
        { label: 'Grey', value: 'grey' },
      ]}
    />
  );
}
Error State
Required field
Required
import { Select } from '@arctic-kit/snow';


function Demo() {
  return (
    <Select
      label="Colors" placeholder="Pick a value" required errorText="Required field"
      options={[
        { label: 'Green', value: 'green' },
        { label: 'Blue', value: 'blue' },
        { label: 'Red', value: 'red' },
        { label: 'Yellow', value: 'yellow' },
        { label: 'Orange', value: 'orange' },
        { label: 'Pink', value: 'pink' },
        { label: 'Purple', value: 'purple' },
        { label: 'Grey', value: 'grey' },
      ]}
    />
  );
}

API Reference

PropsTypeDefault
clearableboolean | undefined---
colorSnowColor"primary"
disabledboolean | undefined---
errorTextstring | undefined---
fullWidthboolean | undefined---
labelstring | undefined---
onChange((value?: SelectKeyValue | undefined) => void) | undefined---
optionsSelectKeyValue[]---
placeholderstring | undefined---
requiredboolean | undefined---
searchableboolean | undefined---
size"small" | "medium" | "large""medium"
valueSelectKeyValue | undefined---
Segmented ControlSkeleton