TextField

Live demo

Workspace name

Shown on invoices.

Enter a full email address.

Plan

Change the plan in billing.

How to use it

A labelled single-line input with optional icon, hint and error.

Provide label (or aria-label when the label is visual, like a search bar), placeholder with a real example, and the usual input props.
hint explains, error replaces the hint and says what to do ("Enter a full email address.").
size: sm for toolbars, md default, lg on mobile forms.
The border is --e-line-strong (3:1 on its surface) and turns --e-focus on focus.

Don't: placeholder-only labels in forms, "e.g." in placeholders, red borders without a message.

In every theme

Follows the mode picked in the header.

Graphite

Glass

Paper

Mineral

Enamel

Ember

Code

React

import { TextField } from 'enma/react';

<TextField label="Workspace name" placeholder="Acme Labs" hint="Shown on invoices." />
<TextField label="Email" type="email" autoComplete="email" error="Enter a full email address." />
<TextField size="sm" icon="search" aria-label="Search customers" placeholder="Search customers" />

Plain HTML

<div class="e-field">
  <label class="e-field__label" for="ws">Workspace name</label>
  <div class="e-field__control e-sq"><input class="e-field__input" id="ws" placeholder="Acme Labs" aria-describedby="ws-hint"></div>
  <div class="e-field__hint" id="ws-hint">Shown on invoices.</div>
</div>

Props

`TextFieldProps`

Also accepts every attribute of Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>.

Props of TextFieldProps
Prop	Type	Default	Description
`label`	React.ReactNode
`hint`	React.ReactNode
`error`	React.ReactNode
`icon`	IconName
`size`	'sm' \| 'md' \| 'lg'