Select

Forms

A borderless select trigger and a floating option list.

Live preview

Framework

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import { Field, Select } from "@nphuonha/ui-kit";

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

import { Field, Select } from "@nphuonha/ui-kit";

<Field label="Framework">
  <Select options={frameworks} placeholder="Choose one" />
</Field>

Compose Select with Field for labels, help text and validation.

Inside a field

Framework

Package manager

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
options	SelectOption[]	—	Value/label entries.
value	string \| null	—	Controlled value.
defaultValue	string \| null	—	Uncontrolled initial value.
onValueChange	(value: string \| null) => void	—	Called when the selection changes.
placeholder	string	"Select…"	Text shown without a value.
disabled	boolean	—	Disables the trigger.
error	boolean	—	Applies the invalid visual state.