Select

A native <select> with the browser chrome removed and a chevron drawn in. Field renders it for dropdown. Native on purpose: it is accessible and works on every device without a custom listbox.

#Preview

#Usage

// { key: 'role', type: 'dropdown', label: 'Your role', options: ['Founder', 'Engineer', 'Designer', { value: 'other', label: 'Something else' }], required: true }
import { Form } from 'kibbleforms';

<Form schema={signup} client={kibble} />

Options are the schema's options: plain strings (value = label) or { value, label } objects. The submitted value is the option value.

#Props

Prop	Type	Default	Description
name	string	required	The field key.
className	string	control classes + appearance-none pr-10	Merged onto the <select>.
…<select> attributes			Everything except name, value, onChange. autocomplete defaults to the schema's value.

Renders <div data-kb="select-wrap" class="relative"><select data-kb="select" …><option value="">…</option>…</select><svg/></div>. data-kb="select" and className are both on the <select>; the wrapper (data-kb="select-wrap") only positions the chevron. The first option is the placeholder (field.placeholder, default "Select an option"); while it is selected the <select> carries data-placeholder so its text can be muted.

#Variants and states

Required, error and disabled follow Input. Prefill with defaultValue: 'Engineer' (an option value).

#Customization

• Tokens: --kb-bg, --kb-fg, --kb-border, --kb-ring, --kb-error, --kb-muted-fg (placeholder and chevron), --kb-radius.
• CSS hooks: [data-kb="select"] (the control), [data-kb="select"][data-placeholder] (nothing chosen yet), [data-kb="select-wrap"] (wrapper, e.g. to move or recolor the chevron).
• For a custom listbox, build on useField(name) from kibbleforms/headless and render your own control inside Field.

#Accessibility

Native semantics: the label's htmlFor targets the <select>, aria-describedby/aria-required/aria-invalid are set, and keyboard behavior is the platform's.

#Related

Choice, Field, Schema: field types