Forms and settings
Input
components/ui/inputLabelled text fields with hint and error states.
Input live demo
Shown in the sidebar and in shared links
Craft notes
- Labels sit above in small caps; hints and errors are wired with aria-describedby
- The error state changes the border and adds an icon, never color alone
- The typing sound is opt-in with typingSound, with natural variation on every key
Play it
Type a new project name with the typing sound on, then clear the field to see the error.
Sounds: type
Variants
Every prop combination the component supports. The chip on each card is the exact props it passes.
Default
label="Project name"Label and field.
With hint
hint="..."A line of guidance under the field.
We only use it for receipts
Error
error="..."Explains what to fix, tied to the field for screen readers.
A project needs a name
Disabled
disabledVisible but not editable.
Typing sound
typingSoundA soft keystroke on every key, for editors and chat.