Skip to content

Text Field

A labelled input with an optional hint and error message.

EmailWe only use it for your receipt.

import { TextField } from '@brand-studio/ui';

export default function TextFieldDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 360 }}>
      <TextField label="Email" type="email" placeholder="you@example.com" hint="We only use it for your receipt." />
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, TextField } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { TextField } from '@brand-studio/ui';

<TextField label="Email" type="email" hint="We only use it for your receipt." />

Examples

Error

An error sets aria-invalid and joins the message to aria-describedby.

Postcode

Enter a full postcode, such as SW1A 1AA.

import { TextField } from '@brand-studio/ui';

export default function TextFieldError() {
  return (
    <div style={{ width: '100%', maxWidth: 360 }}>
      <TextField label="Postcode" defaultValue="12" error="Enter a full postcode, such as SW1A 1AA." />
    </div>
  );
}

Accessibility

The label is always visible and linked to the input.
Hint and error ids are added to any aria-describedby you pass, not swapped for it.

API Reference

Prop	Type	Default
`label`	`string`	–
`hint?`	`string`	–
`error?`	`string`	–

Also accepts every InputHTMLAttributes<HTMLInputElement> attribute.