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

WebStableFormulaires

Web uniquement — React, depuis @krizaka/ui/field. Stable : son API ne change qu’à une version majeure.

Quand l’utiliser

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.

Quand ne pas l’utiliser

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

Installation

Installer

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

Styles

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

Importer

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

Exemples

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	Défaut	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	Défaut	Description
`invalid`	`boolean`	—	Marks the control invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby).

Textarea

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

Accessibilité

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.

Bonnes pratiques

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.

Générée depuis le code de @krizaka/ui 2.0.0-beta.6 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Field

Quand l’utiliser

Quand ne pas l’utiliser

Installation

Exemples

Default

Invalid

Disabled

Textarea

Select

Props

Accessibilité

Bonnes pratiques

Composants liés

Sur cette page