Key Value
A dynamic input component for managing key-value pairs with paste support and validation.
Installation
pnpm dlx shadcn@latest add @diceui/key-valueLayout
Import the parts, and compose them together.
import {
KeyValue,
KeyValueList,
KeyValueItem,
KeyValueKeyInput,
KeyValueValueInput,
KeyValueRemove,
KeyValueError,
KeyValueAdd,
} from "@/components/ui/key-value";
return (
<KeyValue>
<KeyValueList>
<KeyValueItem>
<KeyValueKeyInput />
<KeyValueValueInput />
<KeyValueRemove />
<KeyValueError field="key" />
<KeyValueError field="value" />
</KeyValueItem>
</KeyValueList>
<KeyValueAdd />
</KeyValue>
)Examples
With Paste Support
Paste multiple key-value pairs at once. Supports formats like KEY=VALUE, KEY: VALUE, and tab-separated values.
With Validation
Add validation rules for keys and values with error messages.
With Form
Integrate with React Hook Form for form validation.
API Reference
KeyValue
The main container component that manages the key-value items state.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when disabled |
[data-invalid] | Present when any item has validation errors |
[data-readonly] | Present when read-only |
KeyValueList
Container for rendering the list of key-value items.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-orientation] | vertical | horizontal |
KeyValueItem
Individual key-value pair item container.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-highlighted] | Present when item is highlighted/focused |
KeyInput
Input field for the key part of the item.
Prop
Type
ValueInput
Input field for the value part of the item.
Prop
Type
KeyValueRemove
Button to remove a key-value item.
Prop
Type
KeyValueAdd
Button to add a new key-value item.
Prop
Type
KeyValueError
Error message display for validation errors.
Prop
Type
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| Tab | Navigate between key inputs, value inputs, and buttons. |
| Enter | Submit the current input value. |
| Escape | Cancel the current input. |
| CtrlV | Paste multiple key-value pairs (supports multiple formats). |
Features
- Dynamic Items: Add and remove key-value pairs dynamically
- Paste Support: Paste multiple items at once in various formats (
KEY=VALUE,KEY: VALUE, tab-separated) - Validation: Built-in validation for keys and values with custom validators
- Duplicate Detection: Optional prevention of duplicate keys
- Item Limits: Set minimum and maximum item counts
- Form Integration: Works seamlessly with React Hook Form
- Controlled/Uncontrolled: Supports both controlled and uncontrolled patterns
- Accessibility: Full keyboard navigation and screen reader support
- Customizable: Fully customizable styling and behavior
Paste Formats
The component supports pasting multiple key-value pairs in the following formats:
KEY=VALUE
DATABASE_URL=postgresql://localhost:5432
API_KEY=sk-1234567890
KEY: VALUE
DATABASE_URL: postgresql://localhost:5432
API_KEY: sk-1234567890
KEY VALUE (tab-separated)
DATABASE_URL postgresql://localhost:5432
API_KEY sk-1234567890
When pasting multiple lines, the component will automatically parse and create separate items for each line.