Text field

A text field is an input that allows a user to write or edit text.

#Default

Use a text field to collect a short piece of text.

Name

import { Field, Label, TextField } from '@wolf-rayet/react';

<Field>
  <Label htmlFor="name">Name</Label>
  <TextField id="name" defaultValue="" />
</Field>

#Helper message

Use a helper message to explain what to enter.

Team name

People will see this name across the product.

import { Field, HelperMessage, Label, TextField } from '@wolf-rayet/react';

<Field>
  <Label htmlFor="team" isRequired>Team name</Label>
  <TextField id="team" />
  <HelperMessage>People will see this name across the product.</HelperMessage>
</Field>

#Invalid

Use an error message to say what went wrong and how to fix it.

Work email

Enter an email address, such as name@company.com.

import { ErrorMessage, Field, Label, TextField } from '@wolf-rayet/react';

<Field>
  <Label htmlFor="email">Work email</Label>
  <TextField id="email" defaultValue="not-an-email" isInvalid />
  <ErrorMessage>Enter an email address, such as name@company.com.</ErrorMessage>
</Field>

#Disabled

Use a disabled field when the value cannot be changed yet.

Account ID

import { Field, Label, TextField } from '@wolf-rayet/react';

<Field>
  <Label htmlFor="account">Account ID</Label>
  <TextField id="account" defaultValue="AC-4821" isDisabled />
</Field>