Select
A compact choice field with a keyboard friendly menu.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- A short fixed list where typing is not needed, such as region or sort order.
- Form fields that should submit natively through Radix's hidden select via name.
- Use combobox for long or searchable lists.
- Use multi-select when several values can be chosen.
- Use segmented-control for two to four choices that should stay visible.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { Select } from 'animui/select';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { Select } from "animui/select"; export function RegionSelect() { const [region, setRegion] = useState("eu"); return ( <Select label="Region" value={region} onValueChange={setRegion} options={[ { value: "us", label: "United States" }, { value: "eu", label: "Europe" }, { value: "ap", label: "Asia Pacific", disabled: true }, ]} /> );}Select
A labelled Radix select whose shown value rolls in the direction of the list.
PropTypeDefaultDescription
labelRequiredstring–Visible label for the trigger.optionsRequired{ value: string; label: string; disabled?: boolean }[]–Items in list order.placeholderstring"Select an option"Shown when no value is selected.descriptionstring–Helper copy under the trigger, linked through aria-describedby.idstring–Trigger id. Generated when omitted.classNamestring–Added to the trigger....propsOmit<SelectPrimitive.SelectProps, "children">–Radix Select root props: value, defaultValue, onValueChange, open, onOpenChange, name, required, disabled. ref goes to the trigger button.- EnterorSpaceorArrowDown
- Opens the list from the trigger.
- ArrowUporArrowDown
- Moves between enabled items.
- EnterorSpace
- Selects the highlighted item and closes.
- Escape
- Closes without changing the value.
- Type a letter
- Jumps to the next item starting with it (Radix typeahead).
- Built on Radix Select, so the trigger, listbox, and options get the right roles and focus handling.
- The real value renders in a visually hidden Radix Value; the animated copy is aria-hidden.
- Label is linked with htmlFor, and description through aria-describedby.
- A later option rises in from below and an earlier one drops from above, with a soft blur.
- Reduced motion swaps the value with an instant crossfade.
- The menu matches the trigger width, caps at min(24rem, 100vw minus 20px), and at 320px or the available height, then scrolls.
- Long labels ellipsize in the trigger instead of widening it.
- The trigger never scales on press, so Radix measures a stable anchor on touch.
- The menu renders in a Radix portal only while open; items are not virtualized, so keep the list short.
- The translucent menu drops its backdrop blur under prefers-reduced-transparency.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Pick for a short fixed list where typing is not needed. Use combobox for long or searchable lists, multi-select for several values, and segmented-control for two to four visible choices.
- Controlled with value and onValueChange, or uncontrolled with defaultValue; pass name to submit with a form.
The full library index for assistants is at /llms.txt.