Inputs

TextField

Labelled text input or textarea with hint and error text.

• Provide label always; hint for guidance, error replaces the hint and marks the field invalid. multiline renders a textarea. All other props pass to the input.
• Errors say what happened and what to do ("That link didn't open. Check it and try again.").

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface TextFieldProps {
  label?: string;
  hint?: string;
  error?: string;
  multiline?: boolean;
  value?: string;
  placeholder?: string;
  onChange?: (e: any) => void
}

Use

import { TextField } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/TextField/README.md