import { NativeSelect } from '@saas-ui/react'
export const NativeSelectBasic = () => {
return (
<NativeSelect size="sm" width="240px" placeholder="Select option">
<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
<option value="svelte">Svelte</option>
</NativeSelect>
)
}
import { NativeSelect } from '@saas-ui/react/native-select'<NativeSelect.Root>
<NativeSelect.Field>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</NativeSelect.Field>
</NativeSelect.Root>Use the size prop to change the size of the select component.
'use client'
import { For, Stack } from '@chakra-ui/react'
import { NativeSelect } from '@saas-ui/react'
export const NativeSelectWithSizes = () => {
return (
<Stack gap="4" width="240px">
<For each={['xs', 'sm', 'md', 'lg', 'xl']}>
{(size) => (
<NativeSelect size={size} key={size}>
<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
<option value="svelte">Svelte</option>
</NativeSelect>
)}
</For>
</Stack>
)
}
Use the variant prop to change the appearance of the select component.
'use client'
import { For, Stack } from '@chakra-ui/react'
import { NativeSelect } from '@saas-ui/react'
export const NativeSelectWithVariants = () => {
return (
<Stack gap="4" width="240px">
<For each={['outline', 'subtle', 'plain']}>
{(variant) => (
<NativeSelect variant={variant} key={variant}>
<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
<option value="svelte">Svelte</option>
</NativeSelect>
)}
</For>
</Stack>
)
}
Pass the items prop to the NativeSelectField component to render a list of
options.
import { NativeSelect } from '@saas-ui/react'
export const NativeSelectWithItems = () => {
return (
<NativeSelect size="sm" placeholder="Select option" width="240px">
<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
<option value="svelte">Svelte</option>
</NativeSelect>
)
}
Use the value and onChange props to control the select component.
'use client'
import { useState } from 'react'
import { NativeSelect } from '@saas-ui/react'
export const NativeSelectControlled = () => {
const [value, setValue] = useState('')
return (
<NativeSelect
size="sm"
width="240px"
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>
</NativeSelect>
)
}
Here is an example of how to use the NativeSelect component with
react-hook-form.
'use client'
import { zodResolver } from '@hookform/resolvers/zod'
import { Button, Field, NativeSelect } from '@saas-ui/react'
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>
export const NativeSelectWithHookForm = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormValues>({
resolver: zodResolver(formSchema),
})
const onSubmit = handleSubmit((data) => console.log(data))
return (
<form onSubmit={onSubmit}>
<Field.Root invalid={!!errors.framework}>
<Field.Label>Framework</Field.Label>
<NativeSelect
size="sm"
width="240px"
{...register('framework')}
placeholder="Select framework"
>
<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
<option value="svelte">Svelte</option>
</NativeSelect>
<Field.ErrorText>{errors.framework?.message}</Field.ErrorText>
</Field.Root>
<Button size="sm" type="submit" mt="4">
Submit
</Button>
</form>
)
}
| 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. |