Reticle@etched/reticle 0.0.0

Steps

Numbered steps in an ordered list: done (a check), current (aria-current="step") or upcoming. The steps are labels; the app moves between them with its own buttons, and with onSelect back to a done step.

  1. Done: Candidate
  2. Your relationship
  3. Role
import { Steps, type StepsItem } from "@etched/reticle/steps";

const referral: StepsItem[] = [{ label: "Candidate" }, { label: "Your relationship" }, { label: "Role" }, { label: "Review" }];

export function Preview() {
  return <Steps aria-label="Referral steps" steps={referral.slice(0, 3)} current={1} />;
}

Installation

import { Steps } from "@etched/reticle/steps";

Examples

Wizard header

A row of steps above the form, with the count. Done steps are buttons that go back to them (onSelect); the app's own buttons move forward.

Step 2 of 4

  2. Your relationship
  3. Role
  4. Review
import { useState } from "react";
import { Button } from "@etched/reticle/button";
import { Steps, type StepsItem } from "@etched/reticle/steps";

const referral: StepsItem[] = [{ label: "Candidate" }, { label: "Your relationship" }, { label: "Role" }, { label: "Review" }];

export function WizardHeader() {
  const [step, setStep] = useState(1);

  return (
    <div className="grid" style={{ maxWidth: "none" }}>
      <Steps aria-label="Referral steps" steps={referral} current={step} showCount onSelect={setStep} />
      <div className="row">
        <Button disabled={step === 0} onClick={() => setStep(step - 1)}>
          Back
        </Button>
        <Button variant="primary" disabled={step === referral.length} onClick={() => setStep(step + 1)}>
          {step >= referral.length - 1 ? "Send referral" : "Next"}
        </Button>
      </div>
    </div>
  );
}

Setup checklist

A column of steps, each with a line of help, like Topo setup.

Step 2 of 3

  1. Done: Install Topo

    Add the extension from the Chrome Web Store.

  2. Confirm your account

    Sign in to LinkedIn in the same Chrome profile.

  3. Share connections

    Only the platform admin can see them. You can remove them at any time.

import { Steps, type StepsItem } from "@etched/reticle/steps";

const topo: StepsItem[] = [
  { label: "Install Topo", description: "Add the extension from the Chrome Web Store." },
  { label: "Confirm your account", description: "Sign in to LinkedIn in the same Chrome profile." },
  { label: "Share connections", description: "Only the platform admin can see them. You can remove them at any time." },
];

export function SetupChecklist() {
  return <Steps aria-label="Topo setup" orientation="vertical" steps={topo} current={1} showCount />;
}

Every step done

current at the number of steps marks them all done.

2 of 2 steps done

  1. Done: Select swarmers
  2. Done: Write messages
import { Steps, type StepsItem } from "@etched/reticle/steps";

const swarm: StepsItem[] = [{ label: "Select swarmers" }, { label: "Write messages" }];

export function EveryStepDone() {
  return <Steps aria-label="Create swarm steps" steps={swarm} current={swarm.length} showCount />;
}

API reference

PropTypeDefaultDescription
steps *StepsItem[]–The steps, in order.
current *number–The index of the current step, from 0. Steps before it are done, steps after it are upcoming. steps.length marks every step done.
aria-label *string–Names the list, for example "Referral steps".
orientation"horizontal" | "vertical""horizontal"A row (a wizard header) or a column (a setup checklist).
showCountboolean–Shows "Step n of m" above the steps.
onSelect(index: number) => void–Makes each done step a button that calls this with its index, to go back to it. The current and upcoming steps stay text.