native-select/usage

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Native Select basic usage example

The following example shows how to import and use the native-select component with individual options: ```tsx import { NativeSelect, NativeSelectOptGroup, NativeSelectOption, } from "@/components/ui/native-select" <NativeSelect> <NativeSelectOption value="">Select a fruit</NativeSelectOption> <NativeSelectOption value="apple">Apple</NativeSelectOption> <NativeSelectOption value="banana">Banana</NativeSelectOption> <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption> <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption> </NativeSelect> ```

Native Select groups example

Use NativeSelectOptGroup to organize options into categories within a NativeSelect component.

Native Select styled alternative

For a styled select component with custom styling and animations, see the Select component instead of NativeSelect.

NativeSelect basic usage import

Import NativeSelect, NativeSelectOptGroup, and NativeSelectOption from @/components/ui/native-select.

NativeSelect basic example

A basic NativeSelect example with options: <NativeSelect> <NativeSelectOption value="">Select a fruit</NativeSelectOption> <NativeSelectOption value="apple">Apple</NativeSelectOption> <NativeSelectOption value="banana">Banana</NativeSelectOption> <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption> <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption> </NativeSelect>

NativeSelectOptGroup example with label

Example of NativeSelectOptGroup with label and options: <NativeSelectOptGroup label="Fruits"> <NativeSelectOption value="apple">Apple</NativeSelectOption> <NativeSelectOption value="banana">Banana</NativeSelectOption> </NativeSelectOptGroup>

Native Select import statements

Import the Native Select components with: import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "@/components/ui/native-select"

Native Select basic usage example

A basic Native Select component with options: ```tsx <NativeSelect> <NativeSelectOption value="">Select a fruit</NativeSelectOption> <NativeSelectOption value="apple">Apple</NativeSelectOption> <NativeSelectOption value="banana">Banana</NativeSelectOption> <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption> <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption> </NativeSelect> ```

NativeSelectOptGroup example with options

Example of using NativeSelectOptGroup to group related options: ```tsx <NativeSelectOptGroup label="Fruits"> <NativeSelectOption value="apple">Apple</NativeSelectOption> <NativeSelectOption value="banana">Banana</NativeSelectOption> </NativeSelectOptGroup> ```

Give your agent this brain