'use client'
import { SegmentedControl } from '@saas-ui/react'
export const SegmentedControlBasic = () => {
return (
<SegmentedControl defaultValue="React" items={['React', 'Vue', 'Solid']} />
)
}
Anatomy
import { SegmentedControl } from '@saas-ui/react/segmented-control'<SegmentedControl items={[]} />Examples
Sizes
Use the size prop to change the size of the segmented control.
size = xs
size = sm
size = md
size = lg
'use client'
import { For, Stack, Text, VStack } from '@chakra-ui/react'
import { SegmentedControl } from '@saas-ui/react'
export const SegmentedControlWithSizes = () => {
return (
<Stack gap="5" align="flex-start">
<For each={['xs', 'sm', 'md', 'lg']}>
{(size) => (
<VStack key={size} align="flex-start">
<SegmentedControl
size={size}
defaultValue="React"
items={['React', 'Vue', 'Solid']}
/>
<Text>size = {size}</Text>
</VStack>
)}
</For>
</Stack>
)
}
Controlled
Use the value and onValueChange props to control the selected item.
'use client'
import { useState } from 'react'
import { SegmentedControl } from '@saas-ui/react'
export const SegmentedControlControlled = () => {
const [value, setValue] = useState('React')
return (
<SegmentedControl
value={value}
onValueChange={(e) => setValue(e.value)}
items={['React', 'Vue', 'Solid']}
/>
)
}
Hook Form
Here's an example of how to use the SegmentedControl with react-hook-form.
'use client'
import { Button, Stack } from '@chakra-ui/react'
import { zodResolver } from '@hookform/resolvers/zod'
import { Field, SegmentedControl } from '@saas-ui/react'
import { Controller, useForm } from 'react-hook-form'
import { z } from 'zod'
const formSchema = z.object({
fontSize: z.string({ message: 'Font size is required' }),
})
type FormValues = z.infer<typeof formSchema>
export const SegmentedControlWithHookForm = () => {
const {
handleSubmit,
formState: { errors },
control,
} = useForm<FormValues>({
defaultValues: { fontSize: 'md' },
resolver: zodResolver(formSchema),
})
const onSubmit = handleSubmit((data) => console.log(data))
return (
<form onSubmit={onSubmit}>
<Stack gap="4" align="flex-start">
<Controller
control={control}
name="fontSize"
render={({ field }) => (
<Field.Root invalid={!!errors.fontSize}>
<Field.Label>Font size</Field.Label>
<SegmentedControl
onBlur={field.onBlur}
name={field.name}
value={field.value}
items={['sm', 'md', 'lg']}
onValueChange={({ value }) => field.onChange(value)}
/>
<Field.ErrorText>{errors.fontSize?.message}</Field.ErrorText>
</Field.Root>
)}
/>
<Button size="sm" type="submit">
Submit
</Button>
</Stack>
</form>
)
}
Disabled
Use the disabled prop to disable the segmented control.
'use client'
import { SegmentedControl } from '@saas-ui/react'
export const SegmentedControlWithDisabled = () => {
return (
<SegmentedControl
disabled
defaultValue="React"
items={['React', 'Vue', 'Solid']}
/>
)
}
Disabled Item
Use the disabled prop on the item to disable it.
'use client'
import { SegmentedControl } from '@saas-ui/react'
export const SegmentedControlWithDisabledItem = () => {
return (
<SegmentedControl
defaultValue="React"
items={[
{ label: 'React', value: 'React' },
{ label: 'Vue', value: 'Vue', disabled: true },
{ label: 'Solid', value: 'Solid' },
]}
/>
)
}
Icon
Render the label as a ReactNode to render an icon.
'use client'
import { HStack } from '@chakra-ui/react'
import { SegmentedControl } from '@saas-ui/react'
import { LuGrid2X2, LuList, LuTable } from 'react-icons/lu'
export const SegmentedControlWithIcon = () => {
return (
<SegmentedControl
defaultValue="table"
items={[
{
value: 'table',
label: (
<HStack>
<LuTable />
Table
</HStack>
),
},
{
value: 'board',
label: (
<HStack>
<LuGrid2X2 />
Board
</HStack>
),
},
{
value: 'list',
label: (
<HStack>
<LuList />
List
</HStack>
),
},
]}
/>
)
}
Card
Here's an example of how to use the SegmentedControl within a Card.
Find your dream home
'use client'
import { Button, Card, Heading } from '@chakra-ui/react'
import { Field, SegmentedControl } from '@saas-ui/react'
import { LuSearch } from 'react-icons/lu'
export const SegmentedControlInCard = () => {
return (
<Card.Root width="320px">
<Card.Header>
<Heading size="lg">Find your dream home</Heading>
</Card.Header>
<Card.Body gap="6">
<Field.Root>
<Field.Label>Bedrooms</Field.Label>
<SegmentedControl
defaultValue="Any"
items={['Any', '1', '2', '3', '3+']}
/>
</Field.Root>
<Field.Root>
<Field.Label>Beds</Field.Label>
<SegmentedControl defaultValue="1" items={['Any', '1', '2', '2+']} />
</Field.Root>
<Field.Root>
<Field.Label>Bathrooms</Field.Label>
<SegmentedControl defaultValue="3" items={['Any', '1', '2', '3']} />
</Field.Root>
</Card.Body>
<Card.Footer justifyContent="space-between" mt="3">
<Button variant="surface">Reset</Button>
<Button>
<LuSearch /> 20 results
</Button>
</Card.Footer>
</Card.Root>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'The color palette of the component |
size | 'md' | 'sm' | 'md' | 'lg'The size of the component |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
defaultValue | stringThe initial value of the checked radio when rendered. Use when you don't need to control the value of the radio group. | |
disabled | booleanIf `true`, the radio group will be disabled | |
form | stringThe associate form of the underlying input. | |
id | stringThe unique identifier of the machine. | |
ids | Partial<{
root: string
label: string
indicator: string
item(value: string): string
itemLabel(value: string): string
itemControl(value: string): string
itemHiddenInput(value: string): string
}>The ids of the elements in the radio. Useful for composition. | |
name | stringThe name of the input fields in the radio (Useful for form submission). | |
onValueChange | (details: ValueChangeDetails) => voidFunction called once a radio is checked | |
orientation | 'horizontal' | 'vertical'Orientation of the radio group | |
readOnly | booleanWhether the checkbox is read-only | |
value | stringThe controlled value of the radio group |