TextField & TextArea

npm package: import it from 'flootlets'

bun add flootlets

Or copy it in with the shadcn CLI: import it from '@/components/ui/…'

npx shadcn@latest add https://dyeoh.github.io/flootlets/r/text-field.json

Both need Tailwind CSS v4; see Installation for the setup.

Type an email to see the error appear and clear as you fix it.

Full name

Email

We send your receipt here.

Enter an email address, like siti@example.com

Order notes

Anything the shop should know?

import { createSignal } from 'solid-js';
export default function TextFieldExamples() {
  const [email, setEmail] = createSignal('siti@');
  const error = () =>
    /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email())
      ? undefined
      : 'Enter an email address, like siti@example.com';
  return (
    <Stack gap={5} class="w-full max-w-96">
      <TextField label="Full name" autocomplete="name" required />
      <TextField
        label="Email"
        type="email"
        autocomplete="email"
        description="We send your receipt here."
        value={email()}
        onChange={setEmail}
        error={error()}
      />
      <TextArea label="Order notes" description="Anything the shop should know?" autoResize />
    </Stack>
  );
}

Built on Kobalte’s TextField, which links the label, the description and the error message to the input. When error is set the input gets aria-invalid="true", and screen readers read the message together with the field. Any other attribute (type, autocomplete, inputmode, placeholder…) goes to the <input>; use autocomplete on checkout forms so phones can fill them in.

Props

Prop	Type
label	string	Required. Every input needs a name
hideLabel	boolean	Hide it visually; screen readers still read it
description	string	Help text under the input
error	string	Marks the field invalid and shows the message
value / defaultValue / onChange	string / string / (value: string) => void	Controlled or not
name, required, disabled		For native forms
autoResize	boolean	TextArea only: grow with the text

The input is styled like shadcn/ui’s Input. An invalid input gets a thicker border-destructive, so the state isn’t shown by colour alone.