Fabrials UI

Loading state

Region

Installation

Import the control from @fabrials/ui, after setting the app up.

TypeScript

import { NativeSelect, NativeSelectOption, NativeSelectOptGroup, NativeCheckbox } from "@fabrials/ui";

Or install it under shadcn's name, so code that imports @/components/ui/native-select gets this control. See shims.
```
npx shadcn@latest add @fabrials/native-select
```

API reference

Prop / export	Type	Description
`name / defaultValue`	`string`	Submitted with the form.
`children`	`NativeSelectOption \| NativeSelectOptGroup`	Options, optionally grouped.
`NativeCheckbox indeterminate`	`boolean`	The mixed state of a select-all. It is applied as the element's property and re-applied after every render and change.
`NativeCheckbox label`	`ReactNode`	Puts the box in a whole-row label, a 44px target.

Behavior

Keeps the platform picker on phones. NativeCheckbox is the matching native checkbox; NativeRadio and NativeRadioGroup are the radios.

Accessibility

Keyboard and contrast

Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.