Components

Select

A select in liquid light: the list springs out of the button, options cascade in, and a blob of light slides between them — stretching as it travels.

Paste it into ChatGPT, Claude, Cursor or v0.

Usage

React

import { Select } from '@vizzele/react';

const [spring, setSpring] = useState('liquid');

<Select
  label="Spring"
  value={spring}
  onValueChange={setSpring}
  options={[
    { value: 'liquid', label: 'Liquid', description: 'Quick, a hint of overshoot' },
    { value: 'jelly', label: 'Jelly', description: 'Wobbly' },
    { value: 'heavy', label: 'Heavy', disabled: true },
  ]}
/>

// strings work too
<Select label="Theme" options={['Dark', 'Light', 'Auto']} defaultValue="Dark" name="theme" />

Props

Prop	Type	Default	Description
`options`	`(SelectOption \| string)[]`	—	{ value, label, textValue?, description?, icon?, disabled? }
`value / defaultValue / onValueChange`	`string`	—	Controlled or uncontrolled.
`label / labelledBy`	`string`	—	Accessible name (or the id of a visible label).
`placeholder`	`string`	`'Select…'`	Shown when nothing is chosen.
`size`	`'sm' \| 'md'`	`'md'`	Density.
`placement`	`'bottom' \| 'top'`	`'bottom'`	Preferred side (flips when there is no room).
`name`	`string`	—	Submits the value with forms (hidden input).
`disabled`	`boolean`	—	Disable the whole control.

Usage

Props

Accessibility