TextField

When to useLink to "When to use"

• Names, emails, URLs, phone numbers, passwords and numbers.
• Any form field that needs a visible label with help or error text.

Use something else when:

• the text runs over several lines: TextArea
• the field is a search box: SearchField
• the user picks from a list: Select

UsageLink to "Usage"

import { TextField } from "@arshad-shah/cynosure";
import { mail } from "@arshad-shah/cynosure/icons";

<TextField label="Email" type="email" name="email" required iconStart={mail} clearable />
<TextField label="Name" value={name} onChange={setName} error={nameError} />
<TextField label="Token" type="password" description="Stored locally" />

onChange receives the string value. Use value for controlled state or defaultValue for uncontrolled. type is one of text (default), email, url, tel, password, number or search. With search, the browser's own search decorations are hidden: use clearable for a clear button.

Clear buttonLink to "Clear button"

clearable shows a clear button while the field has a value. It is hidden when the field is disabled. Change its accessible name with labels.clear.

Errors and disabledLink to "Errors and disabled"

error marks the field invalid (aria-invalid) and shows the message with the field. description adds help text.

OptionsLink to "Options"

• variant: outline (default) or soft (tinted, borderless until focus).
• size: xs, sm, md or lg. Heights match Button and Select. xs is a 20px field with smaller text and icons, and xs clear and reveal buttons, for dense desktop chrome. The transparent input reaches past the field's edges, so it is still 24px to press (44px on coarse pointers) while the field looks 20px. Addons keep their own size.
• iconStart and iconEnd: icons at either edge, flipped in right-to-left layouts.
• addonStart and addonEnd: controls inside the field before or after the input (ColorField's swatch button, NumberField's steppers).
• labelHidden: hides the label visually while it still names the field. Prefer a visible label.
• Native input attributes such as name, required, readOnly, maxLength, autoComplete and inputMode pass through.

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

• Label, description and error are linked to the input through Field.
• Forms: works with FormData, form.reset() and required validation. The clear button syncs after reset.
• Clear button: an IconButton that clears the value and returns focus to the input.
• Refs: the ref points at the input element.

ThemingLink to "Theming"

Tokens: --cy-text-field-{height-xs,height-sm,height-md,height-lg,radius,padding-inline,padding-inline-xs,bg,border,soft-bg}, and --cy-text-field-numeric, the typed text's font-variant-numeric (tabular-nums in DateField, NumberField and TimeField). The border, background, radius and read-only fill fall back to Field's shared skin, --cy-field-control-{border,bg,radius,sunken-bg}, which HotkeyField's box reads too.

createTheme({ components: { textField: { radius: "10px", paddingInline: "14px" } } });

RelatedLink to "Related"

SearchField · TextArea · Select · IconButton