Field

Label, help text and error around one form control. The label and messages are linked to the control.

Chip ID

The ID printed on the package.

import { Input } from "@etched/reticle/input";
import { Field } from "@etched/reticle/field";

export function Preview() {
  return (
    <Field label="Chip ID" description="The ID printed on the package.">
      <Input placeholder="SH-24A-0000" />
    </Field>
  );
}

Installation

import { Field } from "@etched/reticle/field";

Examples

Fields

Chip ID

The ID printed on the package, for example SH-24A-0193.

Notes (optional)

Lot

Lot L-7799 does not exist.

import { Input } from "@etched/reticle/input";
import { Field } from "@etched/reticle/field";

export function Fields() {
  return (
    <div className="grid">
      <Field label="Chip ID" description="The ID printed on the package, for example SH-24A-0193.">
        <Input placeholder="SH-24A-0000" />
      </Field>
      <Field label="Notes" required={false}>
        <Input placeholder="Anything the next shift should know" />
      </Field>
      <Field label="Lot" error="Lot L-7799 does not exist.">
        <Input defaultValue="L-7799" />
      </Field>
      <Field label="Email" error={{ message: "Enter an email address.", match: "typeMismatch" }} description="Type a value that is not an email, then leave the field.">
        <Input type="email" defaultValue="sam@" />
      </Field>
    </div>
  );
}

Fieldset

One legend over several fields, with one message for the group. disabled turns off every control in it, for example while the form sends.

LinkedIn and/or email

Enter at least one, so we can reach the candidate.

Referrer

Enter a LinkedIn URL or an email.

import { Input } from "@etched/reticle/input";
import { useState } from "react";
import { Button } from "@etched/reticle/button";
import { Fieldset } from "@etched/reticle/field";

export function Fieldsets() {
  const [sending, setSending] = useState(false);

  return (
    <div className="grid">
      <Fieldset legend="LinkedIn and/or email" description="Enter at least one, so we can reach the candidate.">
        <Input aria-label="LinkedIn URL" placeholder="linkedin.com/in/…" />
        <Input aria-label="Email" type="email" placeholder="name@example.com" />
      </Fieldset>
      <Fieldset legend="Referrer" error="Enter a LinkedIn URL or an email." disabled={sending}>
        <Input aria-label="Referrer LinkedIn URL" placeholder="linkedin.com/in/…" />
        <Input aria-label="Referrer email" type="email" placeholder="name@example.com" />
      </Fieldset>
      <div className="row">
        <Button onClick={() => setSending(!sending)}>{sending ? "Stop sending" : "Send"}</Button>
      </div>
    </div>
  );
}

API reference

Field

Prop	Type	Default	Description
children *	ReactNode	–	The control: Input, InputArea, Select and so on.
label	ReactNode	–	Visible label. Leave it out when the control renders its own label.
required	boolean	–	`false` adds the optional marker after the label.
optionalLabel	ReactNode	"(optional)"	Text after the label when `required` is `false`.
description	ReactNode	–	Help text below the control. Hidden while an error shows.
error	FieldError	–
nativeLabel	boolean	true	`false` for button triggers (Select, Combobox): the label names the control without passing clicks or hover to it.
className	string	–

Fieldset

Prop	Type	Default	Description
legend *	ReactNode	–	The group's title.
children *	ReactNode	–	The fields: Field, Input, InputArea, Select and so on.
required	boolean	–	`false` adds the optional marker after the legend.
description	ReactNode	–	Help text below the group. Hidden while an error shows.
error	ReactNode	–	A message for the whole group, for example "Enter a LinkedIn URL or an email".
disabled	boolean	–	Turns off every control in the group, for example while the form sends.
className	string	–