Text Input
A one-line text box, with optional icons, prefix and suffix text, and actions. Specification: docs/components/text-input.md.
The boxes on this page stand alone, so each input is named with aria-label. With a visible label, a text input is part of a Field.
Size × content
data-size on the box or any container. Each row: a placeholder, a value, icons, prefix and suffix, and all of them together.
sm
md
lg
theme decides
States
Hover and focus are live: point at or click any box. Disabled and read-only are the input's native attributes.
Default · disabled · read-only
Browser validation
The browser's own checks (required, type="email", pattern…) show as an error once you have edited the box and left it. Type something that isn't an email address, then leave.
Status
Error is aria-invalid="true" on the input. Warning and success are data-intent on the box; in a Field, its message sets them for you, and the message says what is wrong. A disabled box keeps its status, softened.
Error
Warning
Success
Box anatomy
Icon, prefix, input, suffix, icon, in that order in the markup; Canon shows the prefix and suffix at the box's ends, the icons inside them. Prefix and suffix are hidden from screen readers (aria-hidden), so the input's name must say what they would: "Price in USD", not "Price" with "$".
Trailing actions
Buttons after the input, powered by canon.js: clear (hidden while the box is empty) and copy. They point at the input with commandfor. Without JavaScript they aren't shown. For show / hide, use Password.
A select before or after the value
A Select or Combobox box as the first (or last) child of the text input: one frame, with a line between them. It is a control of its own, so it needs its own name. With <button><selectedcontent></selectedcontent></button> the box shows only the code while the list also names the country; a combobox with data-search="list" lets people search a long list by country.
Types
Use the native type: it brings the right on-screen keyboard and autofill. Search boxes have no built-in clear button; add the clear action above. Passwords use Password.
Expected length
Native size and maxlength say how long the value is expected to be; the box may size itself from them.
Edge cases
Right-to-left
In right-to-left text, icons and affixes swap sides; "https://" and "@acme.com" still read left to right.
Long values and affixes in a narrow box
When space runs out, prefix and suffix are cut short with an ellipsis; the typing area always keeps at least 4rem.