Component

Select

A styled listbox select with Axie trigger, menu, option descriptions, and keyboard navigation.

Preview

Reset cadenceOptions can carry short descriptions.

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { Select } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/select.json

Copied source import

code

import "@/styles/axie.css";import { Select } from "@/components/axie/select";

Prefer @axie/select? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { Field, Select } from "axie-ui";export function Example() {  return (    <Field label="Reset cadence">      <Select        defaultValue="monthly"        options={[          { label: "Weekly", value: "weekly" },          { label: "Monthly", value: "monthly" }        ]}      />    </Field>  );}

Accessibility

Provide a visible label and avoid placeholder-only selects.
Keep Escape and arrow-key behavior predictable.
Use shorter option labels first, then descriptions for extra context.

Option children

Existing option children still work when you need a quick migration path.

API Reference

Prop	Type	Default	Description
options	SelectOption[]	-	Structured options with labels, values, disabled state, and descriptions.
value	string	-	Controlled selected value.
defaultValue	string	-	Initial selected value for uncontrolled usage.
onValueChange	(value, option) => void	-	Called when an option is selected.
placeholder	ReactNode	Select an option	Text shown before a value is selected.
name	string	-	Hidden input name for form submissions.
children	ReactNode	-	Legacy option children are parsed for simple migration from native select.