# Inputs & navigation

Buttons, form controls, the breadcrumb, and navigation chips and links, drawn like the website's controls: square-ish, a 1.5px border, semibold labels.

## Button

The website's buttons: 4px corners, a 1.5px border, a semibold label. `primary` is filled with ink (black in light mode, white in dark mode; `dark` is the same look), `secondary` sits on the surface framed by the rule, `outline` is the same frame on a transparent fill, and `white` is for dark sections (it turns mint on hover). Renders as a router link with `href`, as an external link with `externalHref`. For a copy or confirm action use the mint chip (`bg-mint text-black border-[1.5px] border-black`), as the code blocks and Copy as Markdown do.

### Variants

### Sizes

`sm` is 32px tall, `md` 40px, `lg` 48px.

### With link

[Go to SDK](/sdk)

[Playground](/playground)

#### Usage

```html
<docs-button variant="primary" href="/sdk">Get Started</docs-button>
<docs-button variant="secondary" size="sm">Cancel</docs-button>
```

## Breadcrumb

"Section / group / page" above every docs page, next to the Copy as Markdown actions. It replaces the old label above the title: the page says where it sits instead. The docs layout renders it once from the URL (`resolveBreadcrumb()` in `src/app/services/breadcrumb.ts`: the section label, the side navigation group, the page label); the section links to its index, the current page is in primary ink. Pages set nothing. A new top-level section needs an entry in `SECTION_LABELS`.

### Example (this page)

#### Usage

```html
<!-- Rendered once by the docs layout, (docs).page.ts -->
<docs-breadcrumb />
```

## Next steps

The "Next steps" footer at the bottom of guide pages: rule-topped columns (a 2px rule, a semibold title with an arrow that nudges right on hover, a gray description), like the website's feature rows. Pass an array of `{ label, path, desc }` links.

## Next steps

- [Installation](/cli/installation) — Install the CLI and verify setup
- [Quickstart](/cli) — Build your first project end to end

#### Usage

```ts
import { DocsNextStepsComponent, NextStepLink } from '../components/ui';

links: NextStepLink[] = [
  { label: 'Installation', path: '/cli/installation', desc: 'Install the CLI' },
];

// template
// <docs-next-steps [links]="links" />
```

## TOC list

Table-of-contents navigation rendered from a `TocItem[]` tree: square legend markers, the active item semibold with a mint marker framed by the rule. Supports one level of nested children and emits `itemClick` on selection. Inputs: `items` (`TocItem[]`), `activeId`, `basePath`, `title`. Output: `itemClick`.

### Example

## On this page

- [Overview](#overview)
  - [Goals](#goals)
  - [Scope](#scope)
- [Installation](#installation)
- [Usage](#usage)

#### Usage

```ts
import { TocItem } from '../components/ui';

items: TocItem[] = [
  { id: 'overview', text: 'Overview', children: [
    { id: 'goals', text: 'Goals' },
  ] },
  { id: 'usage', text: 'Usage' },
];
activeId = 'overview';

// template
<docs-toc-list
  [items]="items"
  [activeId]="activeId"
  title="On this page"
  (itemClick)="activeId = $event"
/>
```

## Chip nav

A wrapping row of pill links — the "jump to a task" / index-of-recipes pattern: a hairline outline that turns into the rule on hover. Replaces the hand-rolled `rounded-full border…` anchors that were duplicated across guide pages. Inputs: `items` (`DocsChipNavItem[]` of `{ label, path, external? }`) and an optional `label`, rendered as an uppercase group label before the chips. Each `path` resolves by shape: a same-page fragment (`#install`) renders as a plain anchor jump, an internal route (`/cli/commands`) as a `routerLink`, and an absolute URL with `external: true` opens in a new tab.

### Example

#### Usage

```html
<docs-chip-nav [items]="jumpTasks" label="Jump to a task" />

// jumpTasks: DocsChipNavItem[] = [
//   { label: 'Scaffold', path: '/cli/scaffolding' },
//   { label: 'Docs', path: 'https://example.com', external: true },
// ];
```

## Toggle group

A small segmented control: a single-select row of pills like the code-tab pills, a hairline outline and an ink fill for the selected option. Replaces hand-rolled `inline-flex rounded-lg border… p-1` toggles. Two-way bind the selected id with `[(value)]`. Input: `options` (`DocsToggleOption[]` of `{ id, label }`).

### Example

Selected: `additive`

#### Usage

```html
<docs-toggle-group [options]="modes" [(value)]="mode" />

// modes: DocsToggleOption[] = [
//   { id: 'additive', label: 'Additive (default)' },
//   { id: 'strict', label: 'Strict mirror' },
// ];
// mode = signal('additive');
```

## Checkbox

A styled checkbox + label row wrapping a native `<input type="checkbox">`, so it stays fully accessible: a square box with a 1.5px rule outline that, when checked, fills mint with a black border and check. Two-way bind with `[(checked)]`, or use `[checked]` + `(checkedChange)` when the state lives in a signal/array elsewhere. Label comes from the `label` input or projected content. Input: `disabled`.

### Example

Indexed in-memory queries

Type-safe data models

Disabled option

#### Usage

```html
<docs-checkbox [(checked)]="enabled" label="Indexed queries" />

<!-- Or drive it from a signal/array externally: -->
<docs-checkbox
  [checked]="selected().includes(cat)"
  (checkedChange)="toggle(cat, $event)"
  [label]="cat"
/>
```

## Select

A styled native `<select>` — keeps the native control and its built-in accessibility, drawn like the outline controls: 4px corners, framed by the 1.5px rule. The optional `label` renders as an uppercase group label above it. Two-way bind with `[(value)]`. Inputs: `options` (`DocsSelectOption[]` of `{ value, label }`), `label`, and `disabled`.

### Example

Sort by

Selected: `relevance`

#### Usage

```html
<docs-select [options]="sortOptions" [(value)]="sortBy" label="Sort by" />

// sortOptions: DocsSelectOption[] = [
//   { value: 'relevance', label: 'Relevance' },
//   { value: 'name', label: 'Name (A–Z)' },
// ];
// sortBy = signal('relevance');
```