Input

An input takes a single value from users: one line of text by default, and a number, an email address or a file when type says so. It accepts every attribute of the native input element and fills the width of its container. A label names the value that the input asks for, and htmlFor on the label refers to the id of the input, so a click on the label moves the focus into the input.

UsageCopy Anchor Link

import { Field, FieldLabel } from "@biem/ui/components/ui/field";
import { Input } from "@biem/ui/components/ui/input";

export function InputDefault() {
	return (
		<div className="w-full max-w-sm">
			<Field>
				<FieldLabel htmlFor="store-name">Store name</FieldLabel>
				<Input id="store-name"/>
			</Field>
		</div>
	);
}

ExamplesCopy Anchor Link

With PlaceholderCopy Anchor Link

A short hint helps users enter a value in the expected form, such as the format of a supplier code. Given as placeholder, the hint stays in the empty input and disappears as soon as users type, so it complements the label instead of replacing it.

Default ValueCopy Anchor Link

Editing an existing record starts from the value it already holds, such as the name of a product group. With defaultValue, the input begins with that value, and users change only what is different.

ControlledCopy Anchor Link

Other parts of an interface often depend on what users type, such as a list of articles that narrows with every letter of a search. Through value and onChange the application holds the value, so it reacts to each change and can set the value itself, for example to empty the input when users reset their filters.

FileCopy Anchor Link

Some workflows need a document from the device users work on, such as a scanned invoice or a photo of damaged goods. With type set to "file", the input lets users choose that document instead of typing a value.

DisabledCopy Anchor Link

A field may not apply until users make an earlier choice, such as a delivery date before they select a delivery method. Once disabled is set, users can neither focus nor change the input, its state is exposed to assistive technology, and the form leaves its value out when users submit it.

Read-OnlyCopy Anchor Link

Values that the system assigns, such as the number of an order, belong in a form without being open to change. Through readOnly the input keeps such a value fixed while users can still reach it with the keyboard, and unlike a disabled input, it is submitted with the form.

InvalidCopy Anchor Link

When a value fails a check, such as an article number with too few digits, users need to know which field to correct. Setting aria-invalid marks the input as invalid, so users recognize it at a glance and assistive technology reports it as well.

API ReferenceCopy Anchor Link