import {
NativeSelectField,
NativeSelectRoot,
} from "@/components/ui/native-select"
const Demo = () => {
return (
<NativeSelectRoot size="sm" width="240px">
<NativeSelectField placeholder="Select option">
<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
<option value="svelte">Svelte</option>
</NativeSelectField>
</NativeSelectRoot>
)
}
Setup
If you don't already have the snippet, run the following command to add the
native-select snippet
npx @chakra-ui/cli snippet add native-selectThe snippet includes a closed component composition for the NativeSelect
component.
Usage
import {
NativeSelectField,
NativeSelectRoot,
} from "@/components/ui/native-select"<NativeSelectRoot>
<NativeSelectField>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</NativeSelectField>
</NativeSelectRoot>Examples
Sizes
Use the size prop to change the size of the select component.
import { For, Stack } from "@chakra-ui/react"
import {
NativeSelectField,
NativeSelectRoot,
} from "@/components/ui/native-select"
const Demo = () => {
return (
<Stack gap="4" width="240px">
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size) => (
<NativeSelectRoot size={size} key={size}>
<NativeSelectField placeholder={`size (${size})`}>
<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
<option value="svelte">Svelte</option>
</NativeSelectField>
</NativeSelectRoot>
)}
</For>
</Stack>
)
}
Variants
Use the variant prop to change the appearance of the select component.
import { For, Stack } from "@chakra-ui/react"
import {
NativeSelectField,
NativeSelectRoot,
} from "@/components/ui/native-select"
const Demo = () => {
return (
<Stack gap="4" width="240px">
<For each={["outline", "subtle", "plain"]}>
{(variant) => (
<NativeSelectRoot variant={variant} key={variant}>
<NativeSelectField placeholder={`variant (${variant})`}>
<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
<option value="svelte">Svelte</option>
</NativeSelectField>
</NativeSelectRoot>
)}
</For>
</Stack>
)
}
Items Prop
Pass the items prop to the NativeSelectField component to render a list of
options.
import {
NativeSelectField,
NativeSelectRoot,
} from "@/components/ui/native-select"
const Demo = () => {
return (
<NativeSelectRoot size="sm" width="240px">
<NativeSelectField placeholder="Select option" items={items} />
</NativeSelectRoot>
)
}
const items = [
{ value: "react", label: "React" },
{ value: "vue", label: "Vue" },
{ value: "angular", label: "Angular" },
{ value: "svelte", label: "Svelte" },
]
Controlled
Use the value and onChange props to control the select component.
"use client"
import {
NativeSelectField,
NativeSelectRoot,
} from "@/components/ui/native-select"
import { useState } from "react"
const Demo = () => {
const [value, setValue] = useState("")
return (
<NativeSelectRoot size="sm" width="240px">
<NativeSelectField
placeholder="Select option"
value={value}
onChange={(e) => setValue(e.currentTarget.value)}
>
<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
<option value="svelte">Svelte</option>
</NativeSelectField>
</NativeSelectRoot>
)
}
Hook Form
Here is an example of how to use the NativeSelect component with
react-hook-form.
"use client"
import { Button } from "@chakra-ui/react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Field } from "@/components/ui/field"
import {
NativeSelectField,
NativeSelectRoot,
} from "@/components/ui/native-select"
import { useForm } from "react-hook-form"
import { z } from "zod"
const formSchema = z.object({
framework: z.string().min(1, { message: "Framework is required" }),
})
type FormValues = z.infer<typeof formSchema>
const Demo = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormValues>({
resolver: zodResolver(formSchema),
})
const onSubmit = handleSubmit((data) => console.log(data))
return (
<form onSubmit={onSubmit}>
<Field
label="Framework"
invalid={!!errors.framework}
errorText={errors.framework?.message}
>
<NativeSelectRoot size="sm" width="240px">
<NativeSelectField
{...register("framework")}
placeholder="Select framework"
items={["React", "Vue", "Angular", "Svelte"]}
/>
</NativeSelectRoot>
</Field>
<Button size="sm" type="submit" mt="4">
Submit
</Button>
</form>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'The color palette of the component |
variant | 'outline' | 'outline' | 'filled' | 'plain'The variant of the component |
size | 'md' | 'lg' | 'md' | 'sm' | 'xs'The size of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. |