From f17deac07081b6d90d791c4b80dab6dc73d739b8 Mon Sep 17 00:00:00 2001
From: Ali Mohammad <freelancealimohammad@gmail.com>
Date: Fri, 30 Oct 2026 03:29:20 +0300
Subject: [PATCH] feat(studio): U06 form primitives - Field, Input, Textarea,
 Select, Switch, Checkbox

React wrappers around the existing .field/.input/.select/.textarea/.switch
classes so screens stop hand-wiring ids, aria-describedby, aria-invalid and
switch semantics; plus a styled Checkbox and a 28px (sm) control size.

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 apps/agent-forge/src/ui/Field.tsx             | 100 +++++++
 .../src/ui/__tests__/controls.test.tsx        | 153 ++++++++++
 apps/agent-forge/src/ui/controls.tsx          | 271 ++++++++++++++++++
 apps/agent-forge/src/ui/form.css              | 166 +++++++++++
 4 files changed, 690 insertions(+)
 create mode 100644 apps/agent-forge/src/ui/Field.tsx
 create mode 100644 apps/agent-forge/src/ui/__tests__/controls.test.tsx
 create mode 100644 apps/agent-forge/src/ui/controls.tsx
 create mode 100644 apps/agent-forge/src/ui/form.css

diff --git a/apps/agent-forge/src/ui/Field.tsx b/apps/agent-forge/src/ui/Field.tsx
new file mode 100644
index 000000000..f7ba04b84
--- /dev/null
+++ b/apps/agent-forge/src/ui/Field.tsx
@@ -0,0 +1,100 @@
+import { createContext, useContext, useId, type ReactNode } from 'react';
+import './form.css';
+
+/** Ids a control inside a {@link Field} picks up automatically. */
+export interface FieldIds {
+  /** The control id the Field's label points at. */
+  id: string;
+  /** Id of the hint `<p>`, present only when the Field has a hint. */
+  hintId?: string;
+  /** Id of the error `<p>`, present only when the Field has an error. */
+  errorId?: string;
+  /** True while the Field carries an error; controls become `aria-invalid`. */
+  invalid: boolean;
+  /** True when the Field is required; controls become `aria-required`. */
+  required: boolean;
+}
+
+const FieldContext = createContext<FieldIds | undefined>(undefined);
+
+/** Props for {@link Field}. */
+export interface FieldProps {
+  /** Visible label, linked to the control through `htmlFor`. */
+  label: ReactNode;
+  /** Muted help text under the control; its id joins `aria-describedby`. */
+  hint?: ReactNode;
+  /** Danger text under the hint; marks the control `aria-invalid`. */
+  error?: string;
+  /** Draws a faint `*` after the label and sets `aria-required` on the control. */
+  required?: boolean;
+  /** Control id; defaults to a `useId` value. */
+  id?: string;
+  /** Label left, control right (switch rows); hint/error wrap full-width below. */
+  inline?: boolean;
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * A labelled, described control row. Controls rendered inside read their id,
+ * `aria-describedby`, `aria-invalid` and `aria-required` from the enclosing
+ * Field via {@link useFieldIds}, so screens stop hand-wiring ids.
+ */
+export function Field({
+  label,
+  hint,
+  error,
+  required = false,
+  id,
+  inline,
+  className,
+  children,
+}: FieldProps): JSX.Element {
+  const autoId = useId();
+  const controlId = id ?? autoId;
+  const ids: FieldIds = {
+    id: controlId,
+    hintId: hint != null ? `${controlId}-hint` : undefined,
+    errorId: error != null ? `${controlId}-error` : undefined,
+    invalid: error != null,
+    required,
+  };
+  const classes = [
+    'field',
+    inline ? 'field-inline' : undefined,
+    error != null ? 'field-invalid' : undefined,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+  return (
+    <FieldContext.Provider value={ids}>
+      <div className={classes}>
+        <label className="field-label" htmlFor={controlId}>
+          {label}
+          {required ? (
+            <span className="field-required" aria-hidden="true">
+              {'*'}
+            </span>
+          ) : null}
+        </label>
+        {children}
+        {hint != null ? (
+          <p className="hint" id={ids.hintId}>
+            {hint}
+          </p>
+        ) : null}
+        {error != null ? (
+          <p className="hint field-error" id={ids.errorId}>
+            {error}
+          </p>
+        ) : null}
+      </div>
+    </FieldContext.Provider>
+  );
+}
+
+/** The enclosing {@link Field}'s ids, or `undefined` outside a Field. */
+export function useFieldIds(): FieldIds | undefined {
+  return useContext(FieldContext);
+}
diff --git a/apps/agent-forge/src/ui/__tests__/controls.test.tsx b/apps/agent-forge/src/ui/__tests__/controls.test.tsx
new file mode 100644
index 000000000..0793229eb
--- /dev/null
+++ b/apps/agent-forge/src/ui/__tests__/controls.test.tsx
@@ -0,0 +1,153 @@
+import { act } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { render as mount } from './render';
+
+import { Field } from '../Field';
+import { Checkbox, Input, Select, Switch, Textarea } from '../controls';
+
+let container: HTMLDivElement;
+const render = (node: React.ReactNode) => {
+  container = mount(node);
+};
+
+const click = (el: Element) => act(() => (el as HTMLElement).click());
+const noop = () => {};
+
+describe('Field', () => {
+  it('labels, describes, invalidates and requires the control it wraps', () => {
+    render(
+      <Field label="Name" hint="Shown on the card." error="Required." required>
+        <Input value="" onChange={noop} />
+      </Field>,
+    );
+    const input = container.querySelector('input')!;
+    const label = container.querySelector('label.field-label')!;
+    expect(label.getAttribute('for')).toBe(input.id);
+
+    const describedBy = input.getAttribute('aria-describedby')!.split(' ');
+    expect(describedBy).toHaveLength(2);
+    const [hintId, errorId] = describedBy;
+    expect(document.getElementById(hintId)!.textContent).toBe('Shown on the card.');
+    expect(document.getElementById(errorId)!.textContent).toBe('Required.');
+    expect(document.getElementById(errorId)!.className).toBe('hint field-error');
+
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+    expect(input.getAttribute('aria-required')).toBe('true');
+
+    const required = container.querySelector('.field-required')!;
+    expect(required.textContent).toBe('*');
+    expect(required.getAttribute('aria-hidden')).toBe('true');
+
+    expect(container.firstElementChild!.classList.contains('field-invalid')).toBe(true);
+  });
+
+  it('lets an explicit id and aria-describedby on the control win over the Field defaults', () => {
+    render(
+      <Field label="Name" hint="Shown on the card." error="Required.">
+        <Input id="x" aria-describedby="mine" value="" onChange={noop} />
+      </Field>,
+    );
+    const input = container.querySelector('input')!;
+    expect(input.id).toBe('x');
+    expect(input.getAttribute('aria-describedby')).toBe('mine');
+  });
+
+  it('names a Switch inside an inline Field through the label, no aria-label needed', () => {
+    render(
+      <Field label="Enable support-bot" inline>
+        <Switch checked onChange={noop} />
+      </Field>,
+    );
+    const field = container.querySelector('.field.field-inline')!;
+    const label = field.querySelector('label.field-label')!;
+    const button = field.querySelector('button[role="switch"]')!;
+    expect(button.id).toBeTruthy();
+    expect(button.id).toBe(label.getAttribute('for'));
+    expect(button.getAttribute('aria-label')).toBeNull();
+  });
+});
+
+describe('Select', () => {
+  it('renders a disabled placeholder option first, keeps option order and supports controlSize="sm"', () => {
+    render(
+      <Select
+        value=""
+        onChange={noop}
+        placeholder="Pick a model"
+        controlSize="sm"
+        options={[
+          { value: 'a', label: 'Alpha' },
+          { value: 'b', label: 'Beta', disabled: true },
+        ]}
+      />,
+    );
+    const select = container.querySelector('select')!;
+    const options = [...select.querySelectorAll('option')];
+    expect(options[0].value).toBe('');
+    expect(options[0].disabled).toBe(true);
+    expect(options[0].textContent).toBe('Pick a model');
+    expect(options.slice(1).map((o) => o.textContent)).toEqual(['Alpha', 'Beta']);
+    expect(options[2].disabled).toBe(true);
+    expect(select.value).toBe('');
+    expect(select.classList.contains('select-sm')).toBe(true);
+  });
+});
+
+describe('Textarea', () => {
+  it('is mono by default and picks up prose/autoGrow classes when asked', () => {
+    render(<Textarea defaultValue="" />);
+    expect(container.querySelector('textarea')!.className).toBe('textarea');
+
+    render(<Textarea prose autoGrow defaultValue="" />);
+    expect(container.querySelector('textarea')!.className).toBe('textarea textarea-prose textarea-autogrow');
+  });
+});
+
+describe('Switch', () => {
+  it('is a button[role=switch] that toggles on click and does nothing when disabled', () => {
+    const spy = vi.fn();
+    render(<Switch checked={false} label="Enable support-bot" onChange={spy} />);
+    const button = container.querySelector('button[role="switch"]')!;
+    expect(button.getAttribute('aria-checked')).toBe('false');
+    expect(button.getAttribute('aria-label')).toBe('Enable support-bot');
+    click(button);
+    expect(spy).toHaveBeenCalledWith(true);
+
+    const disabledSpy = vi.fn();
+    render(<Switch checked={false} label="Enable support-bot" onChange={disabledSpy} disabled />);
+    click(container.querySelector('button[role="switch"]')!);
+    expect(disabledSpy).not.toHaveBeenCalled();
+  });
+
+  it('draws an aria-hidden On/Off state label and a switch-sm size class', () => {
+    render(<Switch checked={false} label="Enable support-bot" onChange={noop} stateLabel size="sm" />);
+    const state = container.querySelector('.switch-state')!;
+    expect(state.classList.contains('overline')).toBe(true);
+    expect(state.textContent).toBe('Off');
+    expect(state.getAttribute('aria-hidden')).toBe('true');
+    expect(container.querySelector('.switch')!.classList.contains('switch-sm')).toBe(true);
+
+    render(<Switch checked label="Enable support-bot" onChange={noop} stateLabel />);
+    expect(container.querySelector('.switch-state')!.textContent).toBe('On');
+  });
+});
+
+describe('Checkbox', () => {
+  it('sets the indeterminate property and toggles when its label is clicked', () => {
+    const spy = vi.fn();
+    render(<Checkbox label="Overwrite" checked={false} indeterminate onChange={spy} />);
+    const input = container.querySelector('input')! as HTMLInputElement;
+    expect(input.type).toBe('checkbox');
+    expect(input.indeterminate).toBe(true);
+    click(container.querySelector('label.checkbox-row')!);
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('renders a muted description line and marks a disabled row', () => {
+    render(<Checkbox label="Overwrite" description="Existing files are replaced." disabled onChange={noop} />);
+    expect(container.querySelector('.checkbox-description')!.textContent).toBe('Existing files are replaced.');
+    expect(container.querySelector('.checkbox-row')!.classList.contains('checkbox-row-disabled')).toBe(true);
+    expect((container.querySelector('input')! as HTMLInputElement).disabled).toBe(true);
+  });
+});
diff --git a/apps/agent-forge/src/ui/controls.tsx b/apps/agent-forge/src/ui/controls.tsx
new file mode 100644
index 000000000..547cc2fa0
--- /dev/null
+++ b/apps/agent-forge/src/ui/controls.tsx
@@ -0,0 +1,271 @@
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  type InputHTMLAttributes,
+  type ReactNode,
+  type SelectHTMLAttributes,
+  type TextareaHTMLAttributes,
+} from 'react';
+import { useFieldIds } from './Field';
+import './form.css';
+
+/** Control density: `'md'` is the Studio's 32px default, `'sm'` a 28px variant. */
+export type ControlSize = 'sm' | 'md';
+
+interface ControlA11yProps {
+  id?: string;
+  invalid?: boolean;
+  'aria-describedby'?: string;
+  'aria-invalid'?: InputHTMLAttributes<HTMLElement>['aria-invalid'];
+  'aria-required'?: InputHTMLAttributes<HTMLElement>['aria-required'];
+}
+
+/**
+ * Merges an enclosing {@link Field}'s ids and state into a control's a11y
+ * props. Explicit props always win; outside a Field only `invalid` applies.
+ */
+function useControlA11y(props: ControlA11yProps): ControlA11yProps {
+  const field = useFieldIds();
+  const described = [field?.hintId, field?.errorId].filter((v): v is string => v != null).join(' ');
+  return {
+    id: props.id ?? field?.id,
+    'aria-describedby': props['aria-describedby'] ?? (described || undefined),
+    'aria-invalid': props['aria-invalid'] ?? (props.invalid || field?.invalid ? true : undefined),
+    'aria-required': props['aria-required'] ?? (field?.required ? true : undefined),
+  };
+}
+
+/** Props for {@link Input}. */
+// fallow-ignore-next-line unused-type -- prop contract; adopted by the form screens in the next tickets.
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  /** Danger border + ring; also set automatically by an enclosing Field error. */
+  invalid?: boolean;
+  /** `'sm'` renders the 28px variant; default is the Studio's 32px control. */
+  controlSize?: ControlSize;
+}
+
+/**
+ * The `.input` text control. Inside a {@link Field} it picks up the label id,
+ * `aria-describedby`, `aria-invalid` and `aria-required` automatically.
+ */
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(props, ref) {
+  const {
+    invalid,
+    controlSize,
+    className,
+    id,
+    'aria-describedby': describedBy,
+    'aria-invalid': ariaInvalid,
+    'aria-required': ariaRequired,
+    ...rest
+  } = props;
+  const a11y = useControlA11y({
+    id,
+    invalid,
+    'aria-describedby': describedBy,
+    'aria-invalid': ariaInvalid,
+    'aria-required': ariaRequired,
+  });
+  const classes = ['input', controlSize === 'sm' ? 'input-sm' : undefined, className].filter(Boolean).join(' ');
+  return <input ref={ref} className={classes} {...a11y} {...rest} />;
+});
+
+/** Props for {@link Textarea}. */
+// fallow-ignore-next-line unused-type -- prop contract; adopted by the form screens in the next tickets.
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Danger border + ring; also set automatically by an enclosing Field error. */
+  invalid?: boolean;
+  /** UI font at 13px for prose (instructions); default keeps the mono 12px shell. */
+  prose?: boolean;
+  /** `field-sizing: content` auto-grow, clamped between 64px and 320px. */
+  autoGrow?: boolean;
+}
+
+/** The `.textarea` control; same Field wiring as {@link Input}. */
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(props, ref) {
+  const {
+    invalid,
+    prose,
+    autoGrow,
+    className,
+    id,
+    'aria-describedby': describedBy,
+    'aria-invalid': ariaInvalid,
+    'aria-required': ariaRequired,
+    ...rest
+  } = props;
+  const a11y = useControlA11y({
+    id,
+    invalid,
+    'aria-describedby': describedBy,
+    'aria-invalid': ariaInvalid,
+    'aria-required': ariaRequired,
+  });
+  const classes = [
+    'textarea',
+    prose ? 'textarea-prose' : undefined,
+    autoGrow ? 'textarea-autogrow' : undefined,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+  return <textarea ref={ref} className={classes} {...a11y} {...rest} />;
+});
+
+/** One option row for {@link Select}. */
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+/** Props for {@link Select}. */
+// fallow-ignore-next-line unused-type -- prop contract; adopted by the form screens in the next tickets.
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+  /** Options rendered in order after the optional placeholder. */
+  options: SelectOption[];
+  /** First option: `<option value="" disabled>`, selected while `value === ''`. */
+  placeholder?: string;
+  /** Danger border + ring; also set automatically by an enclosing Field error. */
+  invalid?: boolean;
+  /** `'sm'` renders the 28px variant; default is the Studio's 32px control. */
+  controlSize?: ControlSize;
+}
+
+/** The `.select` control; options come from data, never children. */
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(props, ref) {
+  const {
+    options,
+    placeholder,
+    invalid,
+    controlSize,
+    className,
+    id,
+    'aria-describedby': describedBy,
+    'aria-invalid': ariaInvalid,
+    'aria-required': ariaRequired,
+    ...rest
+  } = props;
+  const a11y = useControlA11y({
+    id,
+    invalid,
+    'aria-describedby': describedBy,
+    'aria-invalid': ariaInvalid,
+    'aria-required': ariaRequired,
+  });
+  const classes = ['select', controlSize === 'sm' ? 'select-sm' : undefined, className].filter(Boolean).join(' ');
+  return (
+    <select ref={ref} className={classes} {...a11y} {...rest}>
+      {placeholder != null ? (
+        <option value="" disabled>
+          {placeholder}
+        </option>
+      ) : null}
+      {options.map((option) => (
+        <option key={option.value} value={option.value} disabled={option.disabled}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+});
+
+/** Props for {@link Switch}. */
+export interface SwitchProps {
+  checked: boolean;
+  onChange(checked: boolean): void;
+  /** `aria-label`; required unless the Switch sits inside a {@link Field} (then the Field label names it). */
+  label?: string;
+  disabled?: boolean;
+  /** Tooltip, e.g. why the switch is disabled. */
+  title?: string;
+  /** `'sm'` renders the 26x14 track; default is 32x18. */
+  size?: ControlSize;
+  /** Draws an aria-hidden 'On'/'Off' overline before the switch. */
+  stateLabel?: boolean;
+  id?: string;
+}
+
+/**
+ * A `button[role=switch]`, so Enter/Space toggle it for free and its state is
+ * announced. Inside a {@link Field} it borrows the Field's id and a11y state.
+ */
+export function Switch({
+  checked,
+  onChange,
+  label,
+  disabled,
+  title,
+  size,
+  stateLabel,
+  id,
+}: SwitchProps): JSX.Element {
+  const a11y = useControlA11y({ id });
+  const classes = ['switch', checked ? 'on' : undefined, size === 'sm' ? 'switch-sm' : undefined]
+    .filter(Boolean)
+    .join(' ');
+  return (
+    <span className="switch-wrap">
+      {stateLabel ? (
+        <span className="switch-state overline" aria-hidden="true">
+          {checked ? 'On' : 'Off'}
+        </span>
+      ) : null}
+      <button
+        type="button"
+        role="switch"
+        className={classes}
+        aria-checked={checked}
+        aria-label={label}
+        disabled={disabled}
+        title={title}
+        onClick={() => {
+          if (!disabled) onChange(!checked);
+        }}
+        {...a11y}
+      />
+    </span>
+  );
+}
+
+/** Props for {@link Checkbox}. */
+// fallow-ignore-next-line unused-type -- prop contract; adopted by the form screens in the next tickets.
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /** Primary line next to the box. */
+  label: ReactNode;
+  /** Muted secondary line under the label. */
+  description?: ReactNode;
+  /** Sets `el.indeterminate` in an effect (the dash state). */
+  indeterminate?: boolean;
+}
+
+/** A styled checkbox: the whole row is a `<label>`, so the text toggles it. */
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {
+  const { label, description, indeterminate, className, disabled, ...rest } = props;
+  const innerRef = useRef<HTMLInputElement | null>(null);
+  useEffect(() => {
+    if (innerRef.current) innerRef.current.indeterminate = Boolean(indeterminate);
+  }, [indeterminate]);
+  const setRefs = (el: HTMLInputElement | null) => {
+    innerRef.current = el;
+    if (typeof ref === 'function') ref(el);
+    else if (ref) ref.current = el;
+  };
+  const rowClasses = ['checkbox-row', disabled ? 'checkbox-row-disabled' : undefined].filter(Boolean).join(' ');
+  return (
+    <label className={rowClasses}>
+      <input
+        ref={setRefs}
+        type="checkbox"
+        className={['checkbox', className].filter(Boolean).join(' ')}
+        disabled={disabled}
+        {...rest}
+      />
+      <span className="checkbox-text">
+        <span className="checkbox-label">{label}</span>
+        {description != null ? <span className="checkbox-description">{description}</span> : null}
+      </span>
+    </label>
+  );
+});
diff --git a/apps/agent-forge/src/ui/form.css b/apps/agent-forge/src/ui/form.css
new file mode 100644
index 000000000..9d8ea0e03
--- /dev/null
+++ b/apps/agent-forge/src/ui/form.css
@@ -0,0 +1,166 @@
+/*
+ * Form primitives: Field label/hint/error chrome, the 28px control size,
+ * invalid states, prose/autogrow textareas, the switch wrap and the styled
+ * Checkbox. The base .field/.input/.select/.textarea/.switch rules stay in
+ * base.css; everything below only adds to them.
+ */
+
+.field-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text);
+  margin-bottom: 6px;
+}
+.field-required {
+  margin-left: 2px;
+  color: var(--text-faint);
+}
+.field-inline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: var(--space-3);
+}
+.field-inline > .field-label {
+  flex: 1;
+  min-width: 0;
+  margin-bottom: 0;
+}
+.field-inline > .hint {
+  flex-basis: 100%;
+}
+.input-sm,
+.select-sm {
+  min-height: 28px;
+  font-size: 12px;
+  padding: 0 8px;
+  border-radius: var(--radius-sm);
+}
+.select-sm {
+  padding-right: 26px;
+  background-position: right 6px center;
+  background-size: 14px 14px;
+}
+.input[aria-invalid='true'],
+.select[aria-invalid='true'],
+.textarea[aria-invalid='true'] {
+  border-color: var(--danger);
+}
+.input[aria-invalid='true']:focus,
+.select[aria-invalid='true']:focus,
+.textarea[aria-invalid='true']:focus {
+  border-color: var(--danger);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 24%, transparent);
+}
+.textarea-prose {
+  font-family: var(--font-ui);
+  font-size: 13px;
+  line-height: 1.55;
+}
+.textarea-autogrow {
+  field-sizing: content;
+  min-height: 64px;
+  max-height: 320px;
+  resize: none;
+}
+.switch-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.switch-sm {
+  width: 26px;
+  height: 14px;
+}
+.switch-sm::after {
+  width: 10px;
+  height: 10px;
+}
+.switch-sm.on::after {
+  transform: translateX(12px);
+}
+.switch:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.checkbox-row {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  cursor: pointer;
+  font-size: 13px;
+}
+.checkbox-row-disabled {
+  cursor: not-allowed;
+  color: var(--text-muted);
+}
+.checkbox {
+  appearance: none;
+  flex: none;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  margin: 2px 0 0;
+  border: 1px solid var(--border-strong);
+  border-radius: 4px;
+  background: var(--surface);
+  cursor: inherit;
+  transition:
+    background-color var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease);
+}
+.checkbox:checked,
+.checkbox:indeterminate {
+  background: var(--accent-solid);
+  border-color: var(--accent-solid);
+}
+.checkbox:checked::after {
+  content: '';
+  position: absolute;
+  left: 4.5px;
+  top: 1.5px;
+  width: 5px;
+  height: 9px;
+  border: solid var(--on-accent);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.checkbox:indeterminate::after {
+  content: '';
+  position: absolute;
+  left: 3px;
+  right: 3px;
+  top: 6.5px;
+  height: 2px;
+  background: var(--on-accent);
+  border-radius: 1px;
+}
+.checkbox:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.checkbox:disabled {
+  opacity: 0.45;
+}
+.checkbox-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.checkbox-label {
+  color: var(--text);
+  font-weight: 500;
+  line-height: 20px;
+}
+.checkbox-description {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .checkbox {
+    transition: none;
+  }
+}