Theme

Sound

Jump to a component

Core · Forms

Select

A labelled single-choice control that opens a list. Shows the chosen value with an optional leading icon.

@anicanon/sakuga/uiv1.0Used onWeb · iOS · Android

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

Select for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Android

Coming soon

Select for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Use it for: One choice from a short list of plain values, in a labelled field that opens the list: a faction, with its icon.
Not for: One thing among many, with search and groupsPicker
Two to four named values seen at onceSegmentedControl
A choice that is clearer seen than readOptionTiles
A colour chosen by eyeSwatchPicker

Guidelines

States

Closed: the field shows the chosen value and a chevron.
Open: the field edge turns select-open-border, the chevron flips, and a menu drops in under it on select-menu-bg. The chosen option sits on select-option-selected-bg with a check; hover is select-option-hover-bg. The menu is a listbox and each row an option, so arrow keys and screen readers work as a native select.
Empty: the placeholder in field-placeholder.

On phones, prefer the platform picker (an iOS menu or an Android dropdown menu) and keep this field as its trigger.

Motion: the menu drops from the field on motion-fast with ease-enter and leaves on motion-instant with ease-exit. Escape or a press outside closes it. Sound: with sound on, the menu plays the open sound as it drops and the close sound as it leaves; picking an option plays the choose sound instead of the close (README · Sound).

SelectExample.jsxReact

import { Select } from '@anicanon/sakuga/ui';

const factions = [
  { label: 'Heros', icon: 'faction-hero', hint: '8' },
  { label: 'E.R.A.', icon: 'faction-villain', hint: '8' },
  { label: 'Unaligned', icon: 'faction-independent', hint: '7' },
];

export default function SelectExample() {
  return (
    <>
      <Select
        label="Faction · closed"
        value="Heros"
        options={factions}
        hint="Who he stands with."
      />
      <Select label="Faction · open" value="Heros" options={factions} open />
    </>
  );
}

Props`SelectProps`

value

string

Empty shows the placeholder.

placeholder

string

icon

IconName

Leading glyph for the value.

options

SelectOption[]

The list it opens. Without options it is display-only.

highlight

boolean

Rings the field while a picker beside it is choosing for it.

open

boolean

Start open.

onChange

(value: string) => void

Called with the picked option's value (or label).

id

string

From FieldShellProps

label

string

hint

string

optional

boolean

help

{ title?: string; text: ReactNode; }

maxWidth

number

className

string

An IconName is any of the names Icon lists.

Types

interface SelectOption {
    label: string;
    value?: string;
    icon?: IconName;
    hint?: string;
}

SelectExample.swiftiOS · coming soon

SelectExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Colour

select-open-borderSelect: the edge of a select whose menu is open.

accentcamellia-600#c2335f

accentcamellia-400#f4779f

select-menu-bgSelect: the open menu.

bg-surface-raisedneutral-100#ececf0

bg-surface-raisedneutral-875#1a1a21

select-menu-borderSelect: the open menu edge.

border-dividershade-a12rgba(11,10,16,0.12)

border-dividerwhite-a12rgba(255,255,255,0.12)

select-option-hover-bgSelect: an option under the pointer.

bg-fill-subtleshade-a06rgba(11,10,16,0.06)

bg-fill-subtlewhite-a08rgba(255,255,255,0.08)

select-option-selected-bgSelect: the chosen option.

bg-fill-selectedshade-a08rgba(11,10,16,0.08)

bg-fill-selectedwhite-a12rgba(255,255,255,0.12)

select-option-checkSelect: the check beside the chosen option.

accentcamellia-600#c2335f

accentcamellia-400#f4779f

Space and shape

select-gap

gap-md

8px

select-value-gap

gap-md

8px

select-expanded-inset-ring-width

line-strong

2px

select-menu-top

inset-xs

4px

select-menu-padding

inset-xs

4px

select-menu-max-height

its own value

288px

select-menu-radius

radius-md

12px

select-menu-inset-ring-width

line-hairline

1px

select-option-active-scale

scale-press-lg

.98

select-option-gap

gap-md

8px

select-option-min-height

size-control-sm

36px

select-option-padding-x

inset-sm

8px

select-option-radius

radius-sm

8px

select-option-small-check-margin-left

gap-md

8px

select-value-icon-size

icon-size-md

20px

select-chevron-icon-size

icon-size-sm

16px

select-option-icon-size

icon-size-sm

16px

select-check-icon-size

icon-size-sm

16px

select-forced-edge-width

line-hairline

1px

select-forced-open-width

line-strong

2px

Type

select-option-font

text-body

400 14px/20px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

select-option-selected-font-weight

weight-strong

600

select-option-small-font

text-small

500 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Motion

select-chevron-duration

motion-fast

160ms

select-chevron-easing

ease-standard

cubic-bezier(0.2, 0, 0, 1)

select-menu-drop-in-animation

motion-drop-in

sk-drop-in 160ms cubic-bezier(0, 0, 0, 1)

select-option-easing

ease-standard

cubic-bezier(0.2, 0, 0, 1)

select-option-active-duration

motion-instant

100ms

select-option-duration

motion-instant

100ms

select-menu-leaving-drop-out-animation

motion-drop-out

sk-drop-out 100ms cubic-bezier(0.3, 0, 1, 1)

Select

Guidelines

PropsSelectProps

Types

Colour

Space and shape

Type

Motion

Props`SelectProps`