Input group

An input with addons inside its border: icons, text, buttons.

In Content first

See it live

Start Storybook to see it live: npm run storybook

Live from StorybookOpen Input group in StorybookSee it in dark

When to use it

In Content first: The search field, with a clear button and any icon beside a visible word. Not for separate fields.

• Use it when: A search with an icon and a clear button, a value with a unit or currency.
• Not when: Controls that are separate fields (lay them out with field).

Instead:

• Input: A plain field.

Variants

What each variant is for in any design system, then what Content first decided and why. Each sample is the live story with that variant set.

inline-startalignUsed in Content first

Start Storybook to see it live

What it is for

An addon before the text, on the same line: an icon or currency.

✓A search icon or a unit that comes first.

✕Something people press often; put it after the text.

In Content first

The search icon before the text, with the visible label above the field.

Because

What do icons do?Actions, status and navigation · iconography.rolesHow do people recall the interface?They see it fresh each time · human.q2

inline-endalignUsed in Content first

Start Storybook to see it live

What it is for

An addon after the text: a unit, a clear button, a shortcut.

✓Clear, submit or a unit that follows the value.

✕A label that should be outside the field.

In Content first

The clear button after the text, with a word: occasional visitors do not know icons.

Because

How do people recall the interface?They see it fresh each time · human.q2

block-startalignNot used in Content first

Start Storybook to see it live

What it is for

An addon row above the text, inside the field.

✓A toolbar or a label row for a larger input.

✕Single-line fields in a toolbar.

In Content first

Search is one line, and forms are rare and short.

Because

How often do people repeat actions?Rarely · tasks.q2

block-endalignNot used in Content first

Start Storybook to see it live

What it is for

An addon row below the text, inside the field.

✓A counter or actions under a larger input.

✕Single-line fields in a toolbar.

In Content first

Search is one line, and forms are rare and short.

Because

How often do people repeat actions?Rarely · tasks.q2

Why it works this way

Input group looks the way it does because of 3 answers about this product. Each card is one answer, in three steps: the answer, what it decided for Input group, and what would move if it changed.

What do icons do?iconography.roles

1The answer

Actions, status and navigation

Occasional readers need icons for save, share and navigation.

2So Input group

• ✓uses inline-start: The search icon before the text, with the visible label above the field.

It also shapes Button: icon

3If it changed

1

Input group decision would reopen

No other answer follows from it.

How do people recall the interface?human.q2

1The answer

They see it fresh each time

Visitors see the interface fresh each time.

2So Input group

• ✓uses inline-start: The search icon before the text, with the visible label above the field.
• ✓uses inline-end: The clear button after the text, with a word: occasional visitors do not know icons.

It also shapes Button: ghost Button: icon Button: disabled

3If it changed

2

Input group decisions would reopen

No other answer follows from it.

How often do people repeat actions?tasks.q2

1The answer

Rarely

Actions are rare: subscribe, share, save.

2So Input group

• –does not use block-start: Search is one line, and forms are rare and short.
• –does not use block-end: Search is one line, and forms are rare and short.

It also shapes Button: primary Button: large Field: horizontal

3If it changed

2

Input group decisions would reopen

and 2 answers that follow from it: Three, Only what today's screens use.

Words

• Write to one person: "you", not "users".
• Short sentences with room to breathe.
• Explain why before asking for anything.
• Use: Read, Save for later, You, Next issue. Avoid: Click here, Submit, Users, Content.

The labels components use, from the voice tokens:

• content.action.commit: Save
• content.action.cancel: Not now
• content.action.destroy: Remove
• content.action.retry: Try again
• content.action.empty-action: Browse guides

See Voice and tone for the whole voice.

Accessibility and keyboard

Test before you ship:

• Addon buttons have names; icons that only decorate are hidden from screen readers. undefined

Use it in code

npx open-ds add input-group

The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.

Tokens it reads

Input group reads 37 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Input group's tokens to change Input group alone.

Changes with theme

Content first decides what changes when you switch theme. Here a switch changes colors only, so the marked rows differ between light and dark; everything else holds steady.

Part	Its token and the semantic it aliases	Value
Input group
Corner	component.input-group.radiusradius.controlvar(--input-group-radius)	radius.8:0.5rem
Border Changes with theme	component.input-group.bordercolor.border.strongvar(--input-group-border)	Lightstone.light.500:#7A7062Darkstone.dark.400:#A39A8B
Shadow	component.input-group.shadowelevation.cardvar(--input-group-shadow)	shadow.none
Padding left	component.input-group.padding-leftcomponent-spacing-map.x2var(--input-group-padding-left)	space.8:0.5rem
Padding right	component.input-group.padding-rightcomponent-spacing-map.x2var(--input-group-padding-right)	space.8:0.5rem
Padding, bottom	component.input-group.padding-bottomspace.inset.control-xvar(--input-group-padding-bottom)	space.20:1.25rem
Padding, top	component.input-group.padding-topspace.inset.control-xvar(--input-group-padding-top)	space.20:1.25rem
Border 2 Changes with theme	component.input-group.border-2color.border.focusvar(--input-group-border-2)	Lightnavy.light.600:#1E3A5FDarknavy.dark.600:#8FA6C4
Focus ring Changes with theme	component.input-group.focus-ringcolor.border.focusvar(--input-group-focus-ring)	Lightnavy.light.600:#1E3A5FDarknavy.dark.600:#8FA6C4
Border invalid Changes with theme when invalid	component.input-group.border-invalidcolor.status.dangervar(--input-group-border-invalid)	Lightred.light.600:#C42B2BDarkred.dark.600:#F28B8B
Focus ring invalid Changes with theme when invalid	component.input-group.focus-ring-invalidcolor.status.dangervar(--input-group-focus-ring-invalid)	Lightred.light.600:#C42B2BDarkred.dark.600:#F28B8B
Gap	component.input-group.gapspace.gap.defaultvar(--input-group-gap)	space.16:1rem
Padding, top and bottom	component.input-group.padding-ycomponent-spacing-map.x2var(--input-group-padding-y)	space.8:0.5rem
Text size	component.input-group.font-sizetype.body.font-sizevar(--input-group-font-size)	font.size.18:1.125rem
Weight	component.input-group.font-weighttype.label.font-weightvar(--input-group-font-weight)	font.weight.600:600
Text Changes with theme	component.input-group.labelcolor.text.mutedvar(--input-group-label)	Lightstone.light.600:#61594DDarkstone.dark.400:#A39A8B
Disabled opacity disabled when disabled	component.input-group.disabled-opacity-disabledopacity.disabledvar(--input-group-disabled-opacity-disabled)	opacity.40:0.4
Icon size	component.input-group.icon-sizesize.iconvar(--input-group-icon-size)	size.16:1rem
Inline
Start padding left	component.input-group.inline.start.padding-leftspace.inset.control-xvar(--input-group-inline-start-padding-left)	space.20:1.25rem
End padding right	component.input-group.inline.end.padding-rightspace.inset.control-xvar(--input-group-inline-end-padding-right)	space.20:1.25rem
Block
Start padding x	component.input-group.block.start.padding-xspace.inset.control-xvar(--input-group-block-start-padding-x)	space.20:1.25rem
Start padding top	component.input-group.block.start.padding-topspace.inset.control-xvar(--input-group-block-start-padding-top)	space.20:1.25rem
Start padding top 2	component.input-group.block.start.padding-top-2component-spacing-map.x3var(--input-group-block-start-padding-top-2)	space.20:1.25rem
Start padding bottom	component.input-group.block.start.padding-bottomspace.inset.control-xvar(--input-group-block-start-padding-bottom)	space.20:1.25rem
End padding x	component.input-group.block.end.padding-xspace.inset.control-xvar(--input-group-block-end-padding-x)	space.20:1.25rem
End padding bottom	component.input-group.block.end.padding-bottomspace.inset.control-xvar(--input-group-block-end-padding-bottom)	space.20:1.25rem
End padding bottom 2	component.input-group.block.end.padding-bottom-2component-spacing-map.x3var(--input-group-block-end-padding-bottom-2)	space.20:1.25rem
End padding top	component.input-group.block.end.padding-topspace.inset.control-xvar(--input-group-block-end-padding-top)	space.20:1.25rem
Xs
Height	component.input-group.xs.heightsize.control.compactvar(--input-group-xs-height)	size.40:2.5rem
Gap	component.input-group.xs.gapspace.gap.tightvar(--input-group-xs-gap)	space.8:0.5rem
Padding, left and right	component.input-group.xs.padding-xcomponent-spacing-map.x2var(--input-group-xs-padding-x)	space.8:0.5rem
Sm
Height	component.input-group.sm.heightsize.control.defaultvar(--input-group-sm-height)	size.48:3rem
Gap	component.input-group.sm.gapcomponent-spacing-map.x2var(--input-group-sm-gap)	space.8:0.5rem
Corner	component.input-group.sm.radiusradius.controlvar(--input-group-sm-radius)	radius.8:0.5rem
Padding, left and right	component.input-group.sm.padding-xcomponent-spacing-map.x3var(--input-group-sm-padding-x)	space.20:1.25rem
Icon
Sm size	component.input-group.icon.sm.sizesize.control.defaultvar(--input-group-icon-sm-size)	size.48:3rem
Control
Padding, top and bottom	component.input-group.control.padding-yspace.inset.control-xvar(--input-group-control-padding-y)	space.20:1.25rem
From the system
Edge Changes with theme	color.border.default straight from the system, through --border	Lightstone.light.200 · #E4DDD0Darkstone.dark.100 · #2E2A24