A form field: a label, a hint and an error around an Input, a Textarea or a native Select.

WebStableForms

Web only — React, from @krizaka/ui/field. Stable: its API only changes in a major version.

When to use

For every text entry of a form: email, title, description, amount.
Select for a choice among many options (a country): the platform's own menu, right on phones.

When not to use

To turn a setting on or off.Use instead: Switch
To choose among two to five options that should all be visible.Use instead: Radio group
To pick a number in a range by feel.Use instead: Slider

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Field, Input, Textarea, Select } from "@krizaka/ui/field";

Examples

Default

A label, an input and a hint.

We never share it.

import { Field, Input } from "@krizaka/ui/field";

export default function FieldDefault() {
  return (
    <Field.Root>
      <Field.Label htmlFor="email">Email</Field.Label>
      <Input id="email" type="email" aria-describedby="email-hint" placeholder="you@example.com" />
      <Field.Hint id="email-hint">We never share it.</Field.Hint>
    </Field.Root>
  );
}

Invalid

invalid and its error, read through aria-describedby.

Enter a complete address.

import { Field, Input } from "@krizaka/ui/field";

// `invalid` sets `aria-invalid` and `data-invalid`; the error is read through `aria-describedby`.
export default function FieldInvalid() {
  return (
    <Field.Root>
      <Field.Label htmlFor="email-invalid">Email</Field.Label>
      <Input id="email-invalid" type="email" invalid defaultValue="you@" aria-describedby="email-error" />
      <Field.Error id="email-error">Enter a complete address.</Field.Error>
    </Field.Root>
  );
}

Disabled

Not editable.

import { Field, Input } from "@krizaka/ui/field";

export default function FieldDisabled() {
  return (
    <Field.Root>
      <Field.Label htmlFor="email-disabled">Email</Field.Label>
      <Input id="email-disabled" disabled defaultValue="you@example.com" />
    </Field.Root>
  );
}

Textarea

A longer text.

Bio

import { Field, Textarea } from "@krizaka/ui/field";

export default function FieldTextarea() {
  return (
    <Field.Root>
      <Field.Label htmlFor="bio">Bio</Field.Label>
      <Textarea id="bio" placeholder="A few words about you" />
    </Field.Root>
  );
}

Select

A native select.

Country

import { Field, Select } from "@krizaka/ui/field";

// A native select: the platform's menu, accessible and right on phones.
export default function FieldSelect() {
  return (
    <Field.Root>
      <Field.Label htmlFor="country">Country</Field.Label>
      <Select id="country" defaultValue="fr">
        <option value="fr">France</option>
        <option value="tn">Tunisia</option>
        <option value="ca">Canada</option>
      </Select>
    </Field.Root>
  );
}

Props

Input

Prop	Type	Default	Description
`invalid`	`boolean`	—	Marks the control invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby).

Select

A native <select>, styled like the other controls (the platform's menu: accessible and right on phones).

Prop	Type	Default	Description
`invalid`	`boolean`	—	Marks the control invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby).

Textarea

Prop	Type	Default	Description
`invalid`	`boolean`	—	Marks the control invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby).

Accessibility

Plain HTML wiring: Field.Label htmlFor = the control's id; hint and error ids in aria-describedby.
invalid sets aria-invalid and data-invalid on the control.
A disabled control is skipped by Tab: if the value matters, prefer readOnly.

Best practices

Always a visible Field.Label: a placeholder is an example, never the label.
Put the hint before the error is possible (“We never share it”), the error after it is: what is wrong and how to fix it.
Use the right type (email, url, number) and autoComplete: phones show the right keyboard.

Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

Field

When to use

When not to use

Installation

Examples

Default

Invalid

Disabled

Textarea

Select

Props

Accessibility

Best practices

Related components

On this page