Select

A simple select element that can be used to allow the users select an option.

The Select component can be configured in multiple ways, allowing the developer to customize the look and feel of the component, by specifying properties such as size and radius or by adding side icons.

Source code

Theme

Storybook

Tone

Color

Size

Shadow

Radius

Disabled

With ring

Validation

import { Select } from '@almond-ui/core';

function App() {
  return (
    <Select>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </Select>
  );
}

Import

Import the Select component using the following import statement.

import { Select } from '@almond-ui/core';

Tones

The Select component supports three tones: light, solid and transparent.

<View>
  <Select tone="light">
    // ...
  </Select>
  <Select tone="solid">
    // ...
  </Select>
  <Select tone="transparent">
    // ...
  </Select>
</View>

Colors

The Select component supports the following colors: blue, purple, gray, dark and black.

The color property can be used to specify the color of the border and the ring on the focus state.

<View>
  <Select color="blue">
    // ...
  </Select>
  <Select color="purple">
    // ...
  </Select>
  <Select color="gray">
    // ...
  </Select>
  <Select color="dark">
    // ...
  </Select>
  <Select color="black">
    // ...
  </Select>
</View>

Sizes

The Select component supports four size options: xs, sm, md and lg.

<View>
  <Select size="xs">
    // ...
  </Select>
  <Select size="sm">
    // ...
  </Select>
  <Select size="md">
    // ...
  </Select>
  <Select size="lg">
    // ...
  </Select>
</View>

Radiuses

The Select component supports the following radius options: none, sm, base, md, lg and full.

<View>
  <Select radius="none">
    // ...
  </Select>
  <Select radius="sm">
    // ...
  </Select>
  <Select radius="base">
    // ...
  </Select>
  <Select radius="md">
    // ...
  </Select>
  <Select radius="lg">
    // ...
  </Select>
  <Select radius="full">
    // ...
  </Select>
</View>

Shadows

The Select component supports the following shadow options: none, sm, base and md.

<View>
  <Select shadow="none">
    // ...
  </Select>
  <Select shadow="sm">
    // ...
  </Select>
  <Select shadow="base">
    // ...
  </Select>
  <Select shadow="md">
    // ...
  </Select>
</View>

Validation

The Select component supports the following validation options: none, invalid, valid and warning.

<View>
  <Select validation="none">
    // ...
  </Select>
  <Select validation="invalid">
    // ...
  </Select>
  <Select validation="valid">
    // ...
  </Select>
  <Select validation="warning">
    // ...
  </Select>
</View>

States

Select component supports disabled state.

<View>
  <Select disabled>
    // ...
  </Select>
</View>

Ring

You can add a ring to the Select by setting the withRing prop to true.

<View>
  <Select withRing={true}>
    // ...
  </Select>
  <Select withRing={false}>
    // ...
  </Select>
</View>

Icons

You can add an icon to the Select by setting the leftIcon prop to a valid React element.

<View>
  <Select leftIcon="...">
    // ...
  </Select>
</View>

Ref

The Select component supports the ref prop, which allows for obtaining a reference to the associated underlying HTML element.

import { useRef } from 'react';
import { Select } from '@almond-ui/core';

function App() {
  const ref = useRef<HTMLInputElement>(null);
  return (
    <Select ref={ref}>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </Select>
  );
}

API Reference

Properties

Prop	Type	Description	Default
color	`SelectColor`	Sets the border and ring color on focus state	`dark`
disabled	`boolean`	Disables select element	`false`
leftIcon	`ReactElement`	Adds the given icon to the left side of the select element	`undefined`
radius	`SelectRadius`	Sets the border radius	`md`
shadow	`SelectShadow`	Sets the shadow size	`none`
size	`SelectSize`	Sets the select size	`md`
tone	`SelectTone`	Sets the select tone	`light`
validation	`SelectValidation`	Sets the validation state	`none`
withRing	`boolean`	Shows a ring around the select element on active state	`true`

Types

type SelectColor = 'blue' | 'purple' | 'gray' | 'dark' | 'black';

type SelectRadius = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'full';

type SelectShadow = 'none' | 'sm' | 'base' | 'md';

type SelectSize = 'xs' | 'sm' | 'md' | 'lg';

type SelectTone = 'light' | 'solid' | 'transparent';

type SelectValidation = 'none' | 'invalid' | 'valid' | 'warning';

Radio Selector