SettingsForm
ShellsBuild settings forms from data with validation, radio buttons, and checkboxes.
Edit key-value pairs with dynamic rows, secret-value visibility, and validation.
bun add @reopt-ai/opt-uiimport { KeyValueEditor } from "@reopt-ai/opt-ui";Change the width and theme, then interact with the components.
[
{
"id": "1",
"key": "DATABASE_URL",
"value": "postgres://localhost:5432/mydb"
},
{
"id": "2",
"key": "API_KEY",
"value": "sk-1234567890",
"isSecret": true
},
{
"id": "3",
"key": "NODE_ENV",
"value": "production"
}
]항목이 없습니다. 추가 버튼을 눌러주세요.
| 키 | 동작 |
|---|---|
| Tab | 키/값 필드 간 이동 |
Build settings forms from data with validation, radio buttons, and checkboxes.
Switch between sign-in and sign-up forms with email and password validation and a remember-me option.
Guide sequential input with field definitions, per-step validation, an associated progress indicator, and a review step.
Add and remove fields at runtime with count limits, individual validation, and dynamic store updates.
Select files with metadata, image previews, size limits, and description input.
Edit event metadata and caller-owned sections in one form with a shared footer save action.