SelectField

Native selection that retains the platform's keyboard and touch behavior.

Live — this one is real

Visibility

Usage

import { SelectField } from "mizu-ui";

export function Example() {
  return (
    <SelectField label="Visibility" defaultValue="private">
      <option value="private">Private</option>
      <option value="public">Public</option>
    </SelectField>
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect forms/Fields.tsx

Source is included in the npm package under src/forms/Fields.tsx.

Open full source ↗

Props

Prop	Type	Default	Description
label	string	—	Accessible select label.
children	option[]	—	Native option elements.
...select	SelectHTMLAttributes	—	Native value, multiple, events and ref.

Accessibility

Uses the platform select menu. Arrow keys, type-ahead and mobile selection are native.

Motion

CSS transitions explain state changes. Reduced motion removes travel.

Works alongside

FormField TextField TextArea Checkbox