Textbox
Input component for collecting user data with support for various states and customization.
Import
JSX
import Textbox from '@box-kite/react/components/textbox';Basic Textbox
JSX
<Textbox placeholder="Enter your name..." />With Label
JSX
<Flex d="column" gap={2}>
<Box tag="label" fontSize={14} fontWeight={500}>
Email address
</Box>
<Textbox placeholder="[email protected]" />
</Flex>States
JSX
<Textbox placeholder="Default" />
<Textbox placeholder="Focused" />
<Textbox disabled defaultValue="Disabled" />Sizes
JSX
<Textbox py={2} px={3} fontSize={13} placeholder="Small" />
<Textbox placeholder="Default" />
<Textbox py={4} px={5} fontSize={16} placeholder="Large" />Custom Styling
JSX
<Textbox
borderColor="indigo-300"
focus={{ borderColor: 'indigo-500', outlineColor: 'indigo-200' }}
placeholder="Custom focus color"
/>Textbox props
Everything below is this component’s own. All 235 of Box’s style props work on it too, and those are on /box rather than repeated here.
| Prop | Type | Default | What it does |
|---|---|---|---|
name | string | — | What the field submits under, and what a <label htmlFor> of your own would point at. |
props | TextboxTagProps | — | Attributes for the <input> itself — an id, an aria-label, inputMode, autoComplete. |
onInput | (e: React.ChangeEvent<HTMLInputElement>) => void | — | Fires on every keystroke. onChange is React's alias for the same event. |
onChange | (e: React.ChangeEvent<HTMLInputElement>) => void | — | Fires on every keystroke too — React's onChange is the DOM's input, not its change. |
type | TextboxType | — | Which text input this is. It decides the validation, the mobile keyboard and the spinner. |
placeholder | PlaceholderProp | — | A string is the attribute; an object is ::placeholder styles. Neither one names the field. |
value | string | number | — | Controlled value. Pair it with onChange, or the field cannot be typed into. |
defaultValue | string | number | — | The value it starts with when the field owns its own state. |
pattern | string | — | A regular expression the value has to match for the form to be valid. |
autoFocus | boolean | — | Focus it on mount. One per page at most — a stolen focus is a lost place in the document. |
readOnly | boolean | — | Editable to nobody, but still focusable, still read out and still submitted. |
step | number | string | — | How far a number field's spinner and arrow keys move. |
Textbox keyboard
| Key | Result |
|---|---|
Tab | Focuses the field, and Tab again leaves it. Nothing else is intercepted: the caret keys, selection, undo and the clipboard stay the platform's. |
Textbox accessibility
- Nothing here names the field. A
placeholderis not a name — it disappears on the first keystroke — so pair it with a<label htmlFor>of your own, or passprops={{ 'aria-label': … }}. required,patternandtypeare the platform's own validation, which is announced and translated for free where a check of ours would be neither.
Swept with axe on every release, in this state:
Textbox. No violations, with contrast and landmark rules left to a human. Screen-reader results are not published yet.Textbox style tree
Every part the component draws is a node with a name, so a default can be restyled with
Box.components() instead of a selector — and a variant is a name too.textboxvariants: compact