Segmented Input
A group of connected input fields that appear as a single segmented visual unit.
Installation
pnpm dlx shadcn@latest add @diceui/segmented-inputLayout
Import the parts, and compose them together.
import * as SegmentedInput from "@/components/ui/segmented-input";
return (
<SegmentedInput.Root>
<SegmentedInput.Item />
</SegmentedInput.Root>
)Examples
Form Input
Use segmented inputs for structured form data like phone numbers or addresses.
RGB Color Input
Create color input controls using segmented inputs for RGB values.
Vertical Layout
Display segmented inputs in a vertical orientation.
API Reference
SegmentedInput
The main segmented input container.
Prop
Type
SegmentedInputItem
Individual input items within the segmented input.
Prop
Type
Accessibility
The SegmentedInput component follows standard web accessibility practices. Users navigate between inputs using Tab and Shift+Tab keys, which is the expected behavior for form controls.
Keyboard Interactions
| Key | Description |
|---|---|
| Tab | Moves focus to the next input in the segment. |
| ShiftTab | Moves focus to the previous input in the segment. |