Select component · Kition Tessera

Playground

Props

size

invalid

disabled

What is shown

import { Select } from '@kition/tessera-ui'

<Select
  size="md"
>
  {['Normal', 'Multiply', 'Screen', 'Overlay'].map((mode) => <option key={mode}>{mode}</option>)}
</Select>

When not to

Two or three options always visible: use Segmented or Choice.

Examples

Sizes

select.tsx

import { Select } from '@kition/tessera-ui'

export default function Demo() {
  return (
    <div className="demo-stack">
      <Select defaultValue="sheet" aria-label="Kit">
        <option value="sheet">Sheet</option>
        <option value="slide">Slide</option>
        <option value="photo">Photo</option>
      </Select>
      <Select size="lg" defaultValue="slide" aria-label="Kit (large)">
        <option value="sheet">Sheet</option>
        <option value="slide">Slide</option>
      </Select>
    </div>
  )
}

Props

Select

A drop-down. It stays a native select, as kits' do, for the platform's popup and accessibility, drawn as Tessera's control. Children are <option>s.

Prop	Type	Default	Description
`size`	`ControlSize`	`'sm'`
`invalid`	`boolean`	—

Also takes the attributes of its HTML element (`className`, `aria-*`, events…).

Used in

1 of Kition's 16 kits use this component.

Table