Checkbox

import { Checkbox } from "@etched/reticle/checkbox";

export function States() {
  return (
    <div className="row">
      <Checkbox aria-label="Unchecked" />
      <Checkbox aria-label="Checked" defaultChecked />
      <Checkbox aria-label="Some rows selected" indeterminate />
      <Checkbox aria-label="Error" variant="error" />
      <Checkbox aria-label="Disabled" disabled />
      <Checkbox aria-label="Disabled and checked" disabled defaultChecked />
    </div>
  );
}

import { Checkbox } from "@etched/reticle/checkbox";

export function Labels() {
  return (
    <div className="grid">
      <Checkbox label="Retry failed runs" defaultChecked />
      <Checkbox label="Use default statuses" description="Queued, Running, Passed and Failed." />
      <Checkbox label="Label first" controlFirst={false} />
      <Checkbox label="Copy the owner on reports" required={false} />
      <Checkbox label="Lock the bench (admins only)" disabled />
    </div>
  );
}

import { useState } from "react";
import { Checkbox, CheckboxGroup, CheckboxItem } from "@etched/reticle/checkbox";

const benches = ["b-14", "b-15", "p-02"];

function SelectAll() {
  const [value, setValue] = useState(["b-14"]);

  return (
    <CheckboxGroup legend="Benches to drain" value={value} onValueChange={setValue} allValues={benches}>
      <Checkbox parent label="All benches" />
      {benches.map((bench) => (
        <CheckboxItem key={bench} value={bench} label={bench.toUpperCase()} />
      ))}
    </CheckboxGroup>
  );
}

export function Groups() {
  return (
    <div className="grid">
      <CheckboxGroup legend="Notify me by" description="Alerts go to your Etched account." defaultValue={["email"]}>
        <CheckboxItem value="email" label="Email" />
        <CheckboxItem value="slack" label="Slack" />
        <CheckboxItem value="sms" label="Text message" disabled />
      </CheckboxGroup>
      <CheckboxGroup legend="Sites" orientation="horizontal" defaultValue={["tpe-2"]}>
        <CheckboxItem value="tpe-2" label="TPE-2" />
        <CheckboxItem value="sjc-1" label="SJC-1" />
        <CheckboxItem value="aus-3" label="AUS-3" />
      </CheckboxGroup>
      <CheckboxGroup legend="Required checks" error="Choose at least one check.">
        <CheckboxItem value="thermal" label="Thermal" />
        <CheckboxItem value="power" label="Power" />
      </CheckboxGroup>
      <CheckboxGroup legend="Archived checks" disabled defaultValue={["thermal"]}>
        <CheckboxItem value="thermal" label="Thermal" />
        <CheckboxItem value="power" label="Power" />
      </CheckboxGroup>
      <SelectAll />
    </div>
  );
}

import { Checkbox, CheckboxGroup, CheckboxItem } from "@etched/reticle/checkbox";

export function Cards() {
  return (
    <div className="grid">
      <CheckboxGroup legend="Senders" appearance="card" defaultValue={["ana"]}>
        <CheckboxItem value="ana" label="Ana Ruiz" description="ana@etched.com · Recruiter" />
        <CheckboxItem value="sam" label="Sam Lee" description="sam@etched.com · Coordinator" />
        <CheckboxItem value="kai" label="Kai Park" description="kai@etched.com · On leave" disabled />
      </CheckboxGroup>
      <CheckboxGroup legend="Shifts" appearance="card" orientation="horizontal" defaultValue={["day"]}>
        <CheckboxItem value="day" label="Day" description="06:00 to 14:00" />
        <CheckboxItem value="swing" label="Swing" description="14:00 to 22:00" />
        <CheckboxItem value="night" label="Night" description="22:00 to 06:00" />
      </CheckboxGroup>
      <CheckboxGroup legend="Terms (box first)" appearance="card" controlFirst defaultValue={["fall"]}>
        <CheckboxItem value="spring" label="Spring" />
        <CheckboxItem value="summer" label="Summer" />
        <CheckboxItem value="fall" label="Fall" />
      </CheckboxGroup>
      <CheckboxGroup legend="Burn-in checks" appearance="card" error="Choose at least one check.">
        <CheckboxItem value="thermal" label="Thermal" description="Holds 85 °C for an hour." />
        <CheckboxItem value="power" label="Power" description="Draws peak load for ten minutes." />
      </CheckboxGroup>
      <Checkbox appearance="card" label="Send a weekly digest" description="Failed runs, every Monday." defaultChecked />
    </div>
  );
}

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

export function InAField() {
  return (
    <div className="grid">
      <Field label="Archived" description="Archived runs are hidden from the list.">
        <Checkbox />
      </Field>
      <Field error="Accept the data policy to continue.">
        <Checkbox label="I accept the data policy" variant="error" />
      </Field>
    </div>
  );
}