Components
InputGroup
The cds TextInput wrapper: addons, nested buttons, search with clear, an inline expanding search, a textarea toolbar and the composer pill.
Addons
The root paints the field and its states from the control inside: focus on the root (never on the input), hover only when nothing inside is focused, invalid or disabled. A nested end button sits at an equal inset. The leading search icon is 16px in the secondary ink.
InputGroupSearch
Search glyph + type=search (no native cancel button) + Clear. Escape with text clears and stays in place (a dialog behind stays open); a second Escape bubbles. Clear keeps focus in the field.
InputGroupExpandingSearch
A control-height (28, touch 32) ghost icon button with a tooltip; activating it (or ⌘F / Ctrl+F) swaps in the field, focused, without a width animation. Escape on the empty field collapses it and returns focus to the button; ArrowDown emits navigate.
- Design system
- Quarterly planning
- Research notes
- Release checklist
- Support macros
Textarea with a toolbar
The group becomes a column; the block-end addon is a 41px toolbar (28px buttons) with a top rule and the alpha-1 fill. The whole group takes the focus ring.
Pill
The memory composer: a 24px-radius pill on the popover surface with a hairline border (stronger on hover / focus) and shadow-sm → md; no field ring.