Segmented single-select control for filters and view modes.
Add this item from the registry, or import it from the package after installing Default File UI.
Registry path
itsvigneshv/default-file-ui/content-switcherPackage import
import { ContentSwitcher, ContentSwitcherItem } from "@default-file/ui/components/df-content-switcher"Joined bordered segments for single-select options.
Segmented single-select for filters and view modes. Compose ContentSwitcher and ContentSwitcherItem.
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | string | — | Controlled selected value. |
| defaultValue | string | — | Uncontrolled initial value. |
| onValueChange | (value: string) => void | — | Called when selection changes. |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout direction. |
| fullWidth | boolean | false | Stretch items to fill the available width. |
| className | string | — | Additional styles on the root. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | string | — | Item value (required). |
| disabled | boolean | — | Non-interactive item. |
| children | ReactNode | — | Item label. |
| …button attributes | ButtonHTMLAttributes | — | Native button props. |