# Human and agent selector

A floating radio group of two that switches a page between its designed view and a plain text view.

* Kind: component
* Page: https://design.werklist.com/components/view-selector
* Version: 2.1.2

## When to use it

* On every page, fixed at the bottom center of the window.

## When not to use it

* In print.
* A third option, the theme included.
* Hiding it while the page scrolls.

## Rules

* The page keeps its scroll position after a switch.
* Leave free room at the end of each page, so the selector never covers the last line.

## Anatomy

* Capsule: fixed 16 px above the bottom safe area, centered in the window, 48 px high, inner padding 4 px, 2 px between options, full radius, no border (--surface-1, --elevation-2, --radius-full, --space-1, --layer-selector)
* Option: 40 px high, 16 px at each side, full radius (--type-nav, --space-4)
* Chosen fill: Werklist blue with a white label. The fill changes color in 150 ms, it does not slide (--brand-true, --on-brand, --duration-fast, --ease-standard)

## States

* Rest: Muted ink (--text-muted)
* Hover: Control fill and full ink on the option not chosen (--surface-control, --text)
* Chosen: Werklist blue fill, white label, aria-checked true (--brand-true, --on-brand)
* Focus: 2 px ring, 2 px offset (--focus-ring)
* Reduced motion: The color changes at once
* Forced colors: The capsule is outlined, and the chosen option keeps a 1 px outline
* At the footer: Stays at the foot of the window, over the footer too, to the end of the page
* Hidden: In print, and while a dialog or the menu is open

## Keyboard

* Tab: Reaches the chosen option
* ArrowLeft, ArrowRight, ArrowUp, ArrowDown: Move to the other option and choose it
* Home, End: Choose the first or the last option
* Space: Chooses the focused option

## Accessibility

* A radio group named View, with two radio options.
* It comes right after the skip link, before the header.
* Focus stays on the selector after a switch.
* Muted ink and the white label on blue meet 4.5 to 1 in both themes.

## Content

* Option labels: Human, Agent.
* Group name: View.

## Tokens

* --surface-1
* --elevation-2
* --radius-full
* --space-1
* --space-4
* --type-nav
* --text
* --text-muted
* --surface-control
* --brand-true
* --on-brand
* --focus-ring
* --layer-selector
* --duration-fast
* --ease-standard