Input
BaselineLet someone enter and edit a single line of text.
Example
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Input } from 'panel-ui-kit/input';import { Label } from 'panel-ui-kit/label'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <Label htmlFor="email">Email address</Label> <Input id="email" type="email" placeholder="you@example.test" /> </PanelUiTheme> );}When to use
Pair the input with a visible label. Keep validation in the application and connect any error with aria-describedby.
Keyboard
Tab to focus. Use standard text editing keys. Disabled inputs cannot receive focus.
Properties
| Property | Values | Default |
|---|---|---|
value | string | Caller owned |
onChange | ChangeEventHandler | — |
disabled | boolean | false |
aria-invalid | boolean | false |
motion | full · reduced · off · object | Inherited |