Text field | Arbol UI

Language

Appearance

Labelled and described

Full nameAs it appears on their ID document.

import { TextField } from '@arbol-ai/ui';

<div className="grid max-w-sm gap-4">
  <TextField description="As it appears on their ID document." isRequired label="Full name" />
  <TextField autoComplete="email" label="Email" placeholder="ana@example.com" type="email" />
</div>

Validation

The error replaces the description while the value is invalid. Here the app validates as the person types.

EmailEnter an email like ana@example.com.

import { useState } from 'react';
import { TextField } from '@arbol-ai/ui';

const EmailExample = () => {
  const [email, setEmail] = useState('ana@');
  const isInvalid = email !== '' && !/^\S+@\S+\.\S+$/u.test(email);
  return (
    <TextField
      className="max-w-sm"
      description="We send the confirmation there."
      errorMessage="Enter an email like ana@example.com."
      isInvalid={isInvalid}
      label="Email"
      onChange={setEmail}
      type="email"
      value={email}
    />
  );
};

<EmailExample />

Multiline

The text area grows with what is typed.

Note for the front deskOnly your team sees it.

import { TextField } from '@arbol-ai/ui';

<TextField
  className="max-w-sm"
  description="Only your team sees it."
  label="Note for the front desk"
  multiline
  placeholder="Bring the referral order."
/>

Input and TextArea alone

Outside a field they are native elements: name them with aria-label.

import { Input, TextArea } from '@arbol-ai/ui';

<div className="grid max-w-sm gap-3">
  <Input aria-label="Campaign name" defaultValue="October reminders" />
  <TextArea aria-label="Message" defaultValue="Hi! Your appointment is tomorrow at 9:00." />
</div>

Source

The examples above are src/components/text-field/text-field.examples.tsx, which the library’s tests render too.