Content Switcher
Displays a segmented control that allows users to switch between multiple views.
Loading preview…
1
'use client';2
3
import { useState } from 'react';4
import { ContentSwitcher } from 'sdaia-ui';5
Installation
npx sdaia-ui@latest add contentswitcher
Usage
import { ContentSwitcher } from "@/components/ui/content-switcher"1<ContentSwitcher>2<ContentSwitcherItem>Tab</ContentSwitcherItem>3</ContentSwitcher>
Examples
Size
Use the `size` prop to change the size of the content switcher.
Loading preview…
1
<ContentSwitcher2
size="Large" | "Medium" | "Small"3
/>Two Items
Use `value={2}` to create a two-item switcher.
Loading preview…
1
<ContentSwitcher2
value={2}3
/>Three Items
The default switcher with three equally-spaced items.
Loading preview…
1
<ContentSwitcher2
value={3}3
/>Four Items
Use `value={4}` for a four-item segmented control.
Loading preview…
1
<ContentSwitcher2
value={4}3
/>With Border
Use `border={true}` to add a surrounding border to the switcher.
Loading preview…
1
<ContentSwitcher2
border={true}3
/>API Reference
Content Switcher Props
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 |