Components / inputs

Text Field

Single-line text input with label, helper text and optional leading/trailing icons.

import { TextField } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { TextField } from '@basiiik/ui';

<TextField label="Email" />

• Example values were filled in for the required prop label: replace them with your own.
• Hover and Focused are CSS (:hover, :focus-within). Filled is simply a non-empty value. Error is the error prop (true keeps the helper text; content replaces it). Disabled uses the disabled attribute. Omit label to hide it (then aria-label is required); omit helperText to hide the helper.
• Storybook: Inputs/Text Field.

Props

States. Hover and Focused are CSS (:hover, :focus-within). Filled is simply a non-empty value. Error is the error prop (true keeps the helper text; content replaces it). Disabled uses the disabled attribute. Omit label to hide it (then aria-label is required); omit helperText to hide the helper.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Single-line free-form text, email, password, numbers

Do not use it when

• Multi-line text (use Textarea)
• Choosing from a fixed list (use Select or Radio)
• A list of free-text entries that become tags, such as email addresses (use Tag Input)

Rules for agents

• Every Text Field has a visible label; the placeholder never replaces it
• For an invalid field, pass the message as error content rather than error={true}, so the problem is described in text
• Fixed text that belongs to the value (a currency sign, https://, .com, a unit) goes in prefix or suffix, not in the label and not in a separate element next to the field
• A password field takes type="password" and revealable, which adds the show/hide button inside the field; do not build the eye button yourself

Avoid

• Using the placeholder as the only label
• Showing an error before the user has finished typing
• Clearing what the user typed after a validation error
• Disabling a field without explaining why

Writing the content

• Labels are short nouns: 'Email', 'Full name'
• Placeholders show an example format, never instructions or the label itself
• Helper text explains constraints before the user makes a mistake
• Use sentence case

Keyboard

• Standard text entry

Accessibility

• Associate label with for/id
• aria-describedby pointing at helper or error text
• aria-invalid="true" in Error
• aria-required when required

Colour tokens it reads

Related

• Textarea
• Select
• Search
• Tag Input

inputs 18 Figma variants Try it in the live demo