Text InputHealthy

Usage

Text inputs allow users to input and edit custom text. Text inputs often have input requirements indicated by their label, ghost text, and/or error state.

import { TextInput } from '@houzz/ui';

<HorizontalStack>
    <TextInput name="test" labelText="Label text" />
    <TextInput name="test" type="number" placeholder="Placeholder text" />
    <TextInput name="test" type="password" labelText="Label text" placeholder="Placeholder text" />
</HorizontalStack>

Size

Use the size prop to select from available size variants.

Helper text and error validation

Text inputs can provide hints on the expected value through helperText. In conjunction with the error state, this gives feedback to the user when their input is incorrect.

Icons

An Icon can render to the left or right of an input.

Input states

Inputs can be disabled or read only.

Note: The read only input uses a combination of readOnly prop and “Read Only” helperText. Please provide a localized string for the helper text when using this state.

External label

Sometimes it is required to display an external label rather than the built-in one. There are two ways of associating a label with an input – implicitly by wrapping TextInput by a Label or explicitly using htmlFor property on Label and id property on TextInput.

Props

Accessibility

• Know when to use a placeholder vs label.
  • Placeholders are meant to give examples or hints of input and should be kept short
  • Labels provide context to the user and screenreaders about what the input is
  • A GhostLabel as implemented is meant as a Label. If a real placeholder is required, use both.
  • If a label is not meant to be shown, still provide one and hide it off screen with VisuallyHidden