# TextField

Source: https://design.ritchiebros.com/components/inputs/text-field/

A text field is an input that people can type into. It supports several formats, including numbers, and a range of options such as help text, prefixes, and validation.

## Figma

The Figma reference for **TextField** will appear here once the design link is added.

## Storybook

Interactive examples for **TextField** will render here once the Storybook link is wired in.

## Best practices

- Be clearly labeled so it’s obvious what to enter into the field.
- Mark the field “(optional)” when the input isn’t required.
- Only ask for information that’s really needed.
- Validate input as soon as the person has finished interacting with the field — but not before.
- Set an appropriate autocomplete value and inputMode so browsers can autofill and show the right virtual keyboard.

## Do’s and don’ts

**Do:** Give the field a short, descriptive label placed above it.

**Don’t:** Use placeholder text as the only label — it disappears once typing starts.

## Related components

- [TextareaAutosize](https://design.ritchiebros.com/components/utils/textarea-autosize/)
- [Autocomplete](https://design.ritchiebros.com/components/inputs/autocomplete/)
- [Select](https://design.ritchiebros.com/components/inputs/select/)