Displays a segmented control that allows users to switch between multiple views.
Loading demo: contentswitcher-real-world
npx sdaia-ui@latest add contentswitcher
import { ContentSwitcher } from "@/components/ui/content-switcher"1<ContentSwitcher>2<ContentSwitcherItem>Tab</ContentSwitcherItem>3</ContentSwitcher>
Use the `size` prop to change the size of the content switcher.
Loading demo: contentswitcher-size
Use `value={2}` to create a two-item switcher.
Loading demo: contentswitcher-two-items
The default switcher with three equally-spaced items.
Loading demo: contentswitcher-three-items
Use `value={4}` for a four-item segmented control.
Loading demo: contentswitcher-four-items
Use `border={true}` to add a surrounding border to the switcher.
Loading demo: contentswitcher-border
Props for the Content Switcher component.
Prop | Type | Default | Required |
|---|---|---|---|
items | ContentSwitcherItem[] | — | required |
value | string | — | optional |
defaultValue | string | first item | optional |
onValueChange | (value: string) => void | — | optional |
size | "sm" | "md" | "lg" | "sm" | optional |
border | boolean | false | optional |
placement | "start" | "center" | "end" | "start" | optional |
dir | "ltr" | "rtl" | — | optional |
rtl | boolean | false | optional |