Input

Single-line text field. Native <input> attributes and ref pass through.

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

export function Preview() {
  return <Input aria-label="Search runs" placeholder="Search runs" />;
}

Installation

import { Input, InputArea } from "@etched/reticle/input";

Examples

Sizes

import { Input, type InputSize } from "@etched/reticle/input";

const sizes: InputSize[] = ["sm", "base"];

export function Sizes() {
  return (
    <div className="row">
      {sizes.map((s) => (
        <Input key={s} size={s} aria-label={`Search, ${s}`} placeholder={`Search (${s})`} />
      ))}
    </div>
  );
}

Labels and states

label, description and error wrap the input in a Field.

Run ID

Owner

Shown on the run page.

Site

Site TPE-9 does not exist.

Created by

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

export function LabelsAndStates() {
  return (
    <div className="grid">
      <Input label="Run ID" defaultValue="run_7f3a91c2" />
      <Input label="Owner" placeholder="Name or email" description="Shown on the run page." />
      <Input label="Site" defaultValue="TPE-9" error="Site TPE-9 does not exist." />
      <Input label="Created by" defaultValue="system" disabled />
    </div>
  );
}

Input area

Comment

Notes (grows from 2 to 6 rows)

import { InputArea } from "@etched/reticle/input";

export function InputAreas() {
  return (
    <div className="grid">
      <InputArea label="Comment" rows={3} placeholder="Add a comment" />
      <InputArea label="Notes (grows from 2 to 6 rows)" autoResize minRows={2} maxRows={6} placeholder="Type several lines" />
    </div>
  );
}

Character limit

limit shows the count under the field. Past the limit, the count and the field turn red; nothing is cut off.

Note to the hiring manager

63 / 140

Summary

76 / 60

import { InputArea } from "@etched/reticle/input";

export function CharacterLimit() {
  return (
    <div className="grid">
      <InputArea label="Note to the hiring manager" limit={140} defaultValue="Strong on clock trees; wants to stay close to silicon bring-up." />
      <InputArea
        label="Summary"
        limit={60}
        defaultValue="Led the clock tree rework on the last tape-out, and owned the bring-up plan."
      />
    </div>
  );
}

API reference

InputArea

Prop	Type	Default	Description
label	ReactNode	–
description	ReactNode	–
error	FieldError	–
size	"sm" \| "base"	"base"
autoResize	boolean	–	Grow and shrink with the text, between `minRows` and `maxRows`.
minRows	number	1
maxRows	number	–
limit	number	–	Shows "n / limit" under the field. Typing past it is allowed: the count and the field turn red, so no text is cut off without notice.
className	string	–

Input

Prop	Type	Default
label	ReactNode	–
description	ReactNode	–
error	FieldError	–
size	"sm" \| "base"	"base"
className	string	–