Input
Single-line and multi-line text entry. Native elements, so they post with the form and work without JavaScript.
Examples
Sizes
Light
Dark
<Input size="sm" aria-label="Filter servers" type="search" placeholder="Filter servers" />
<Input size="md" aria-label="Server name" value="github" />
<Input size="lg" aria-label="Server URL" type="url" value="https://api.githubcopilot.com/mcp" mono />States
Light
Dark
<Input aria-label="Server URL" value="api.githubcopilot.com" invalid mono />
<Input aria-label="Transport" value="HTTP" disabled />
<Input aria-label="Server id" value="srv_7f3a2c" readOnly mono />Textarea
Mono for headers, JSON and other machine-read text. Resizes vertically.
One per line, as Name: value.
<Field id="headers" label="Extra headers" hint="One per line, as Name: value.">
<Textarea name="headers" mono value="X-GitHub-Api-Version: 2022-11-28" />
</Field>Usage
import { Input, Textarea } from '@switchboard/ui'
<Field id="server-name" label="Server name">
<Input name="name" required />
</Field>Props
Every component also takes mix, for css() and mixins applied after its own style.
Input
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'md' | Height 28, 32 or 36px. |
| invalid | boolean | – | Sets aria-invalid and the danger ring. Defaults to whether the Field has an error. |
| mono | boolean | – | Plex Mono, for URLs, tokens, slugs and headers. |
| mix | Mix | – | Extra css() or mixins, applied after the input style. |
Also accepts every <input> attribute. type defaults to "text". id, required and aria-describedby come from a surrounding Field unless set here.
Textarea
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | – | Initial text. |
| invalid | boolean | – | Sets aria-invalid and the danger ring. |
| mono | boolean | – | Plex Mono at 13px. |
Also accepts every <textarea> attribute. Reads Field context like Input.
Accessibility
- Native <input> and <textarea>: typing, autofill, form posting and validation work before hydration.
- Outside a Field, give the control a name with aria-label or a <label for>.
- invalid sets aria-invalid="true"; pair it with a message the person can read.
Guidance
Do
- Use the matching type (url, email, search) for the right keyboard on phones.
- Use mono only for values people copy into other programs.
Don’t
- Rely on placeholder text for instructions; it disappears on typing.
- Disable a field to show a value people may need to copy; use readOnly.