Docs / Forms / Form control

Form control

The text input of the form system. FormControl renders an <input> by default and passes every native attribute through, so type, placeholder, value, and the rest work exactly as you’d expect.

Import

import { FormControl } from '@metatoy/bootstrap-styled';

Types

Because native attributes pass through, FormControl covers every text-like input via type — text, email, password, number, search, url, tel, date, and more:

<FormControl type="email" placeholder="name@example.com" />
<FormControl type="password" />
<FormControl type="search" placeholder="Search…" />

Sizes

Set size="sm" or size="lg" to scale padding, font-size, and height together. (Note: size is the Bootstrap sizing token here, not the native HTML size attribute.)

Textarea

Render a multi-line control with as="textarea". The rows attribute is supported alongside the standard text-input props.

File & color inputs

type="file" styles the native file picker (and honors size), and type="color" renders the swatch input.

Disabled, readonly & plaintext

disabled dims the control and blocks input; readOnly keeps the field styled but non-editable. Add plaintext to a read-only field for a borderless display value that reads as text — handy for review or summary screens.

Validation states

isValid and isInvalid paint the control’s border green or red. Pair them with FormFeedback to show the accompanying message.

Props

FormControl also accepts all native <input> attributes (and <textarea> attributes such as rows when as="textarea").

Theming

FormControl reads --bs-body-bg / --bs-body-color for its fill and text, --bs-border-color / --bs-border-width / --bs-border-radius for the border, and --bs-primary / --bs-primary-rgb for the focus ring. The validation borders come from --bs-form-valid-border-color and --bs-form-invalid-border-color (derived from --bs-success / --bs-danger). The sm / lg sizes use --bs-border-radius-sm / --bs-border-radius-lg.

Accessibility

Give every control an associated label — a FormLabel with htmlFor matching the control’s id, or an aria-label when a visible label isn’t possible. When a field is invalid, reference its error message with aria-describedby and set aria-invalid; isInvalid styles the border but does not set ARIA on its own.

Explore in Ladle

Browse every input type, size, and state in the interactive gallery: Open in Ladle.