# Textbox

_Box Kite 2.2.5 · a markdown copy of https://www.box-kite.dev/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="you@example.com" />
</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](https://www.box-kite.dev/box.md) 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 `placeholder` is not a name — it disappears on the first keystroke — so pair it with a `<label htmlFor>` of your own, or pass `props={{ 'aria-label': … }}`.
- `required`, `pattern` and `type` are 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.

`textbox`variants: compact

---

_Every page: https://www.box-kite.dev/llms.txt · every prop, measured: https://www.box-kite.dev/props.md_