Input group

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

In Multi-brand

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 Multi-brand: A field with a unit or currency, or a search with an icon. Not for separate fields; field lays those out.

• 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 Multi-brand decided and why. Each sample is the live story with that variant set.

inline-startalignUsed in Multi-brand

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 Multi-brand

A currency sign or a search icon before the text, from the outline set every brand shares.

Because

What icon style?Outline · iconography.definitionWhat is the main content?Forms and tasks · content.q1

inline-endalignUsed in Multi-brand

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 Multi-brand

A unit after the value, the same in every brand.

Because

What is the main content?Forms and tasks · content.q1What do components read?Component keys · naming.lands

block-startalignNot used in Multi-brand

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 Multi-brand

Sign-up and account fields stay one line; field puts the label above, outside the input.

Because

What is the main content?Forms and tasks · content.q1What accessibility level do we commit to?AA · people.q2

block-endalignNot used in Multi-brand

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 Multi-brand

Sign-up and account fields stay one line; field shows the hint and error below.

Because

What is the main content?Forms and tasks · content.q1What accessibility level do we commit to?AA · people.q2

Why it works this way

Input group looks the way it does because of 4 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 icon style?iconography.definition

1The answer

Outline

One outline set for every brand.

2So Input group

• ✓uses inline-start: A currency sign or a search icon before the text, from the outline set every brand shares.

It also shapes Empty: icon

3If it changed

1

Input group decision would reopen

No other answer follows from it.

What is the main content?content.q1

1The answer

Forms and tasks

Product pages, sign-up and account forms.

2So Input group

• ✓uses inline-start: A currency sign or a search icon before the text, from the outline set every brand shares.
• ✓uses inline-end: A unit after the value, the same in every brand.
• –does not use block-start: Sign-up and account fields stay one line; field puts the label above, outside the input.
• –does not use block-end: Sign-up and account fields stay one line; field shows the hint and error below.

It also shapes Badge: warning Alert: default Item: outline

3If it changed

4

Input group decisions would reopen

and 9 answers that follow from it: A moderate amount, Gaps, insets and row heights, Comfortable, and 6 more.

What do components read?naming.lands

1The answer

Component keys

Components never change; brand primitives do.

2So Input group

• ✓uses inline-end: A unit after the value, the same in every brand.

3If it changed

1

Input group decision would reopen

No other answer follows from it.

What accessibility level do we commit to?people.q2

1The answer

AA

AA in every brand.

2So Input group

• –does not use block-start: Sign-up and account fields stay one line; field puts the label above, outside the input.
• –does not use block-end: Sign-up and account fields stay one line; field shows the hint and error below.

It also shapes Button: focus Button: disabled Field: vertical

3If it changed

2

Input group decisions would reopen

and 1 answer that follow from it: AA.

Words

• Shared structure: object, state, next step.
• Brand tone lives in headlines and marketing copy, not in errors.
• Errors and confirmations read the same in every brand.
• Use: Get started, Plan, Order. Avoid: Brand-specific words in errors, Jargon.

The labels components use, from the voice tokens:

• content.action.commit: Save
• content.action.cancel: Cancel
• content.action.destroy: Remove
• content.action.retry: Try again
• content.action.empty-action: Get started

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

Multi-brand decides what changes when you switch theme. Here a switch changes colors, type and shape, so the marked rows differ between its brands and between light and dark; everything else holds steady.

Part	Its token and the semantic it aliases	Value
Input group
Corner Changes with theme	component.input-group.radiusradius.controlvar(--input-group-radius)	Aster Lightradius.4:0.25remAster Darkradius.4:0.25remBirch Lightradius.12:0.75remBirch Darkradius.12:0.75remCoral Lightradius.999:9999pxCoral Darkradius.999:9999px
Border Changes with theme	component.input-group.bordercolor.border.strongvar(--input-group-border)	Aster Lightslate-deep.light.500:#64748BAster Darkslate-deep.dark.400:#96A3B5Birch Lightslate-deep.light.500:#64748BBirch Darkslate-deep.dark.400:#96A3B5Coral Lightslate-deep.light.500:#64748BCoral Darkslate-deep.dark.400:#96A3B5
Shadow Changes with theme	component.input-group.shadowelevation.cardvar(--input-group-shadow)	Aster Lightshadow.cardAster Darkshadow.card-darkBirch Lightshadow.cardBirch Darkshadow.card-darkCoral Lightshadow.cardCoral Darkshadow.card-dark
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.16:1rem
Padding, top	component.input-group.padding-topspace.inset.control-xvar(--input-group-padding-top)	space.16:1rem
Border 2 Changes with theme	component.input-group.border-2color.border.focusvar(--input-group-border-2)	Aster Lightteal.light.600:#0F766EAster Darkteal.dark.600:#7FCFC6Birch Lightpurple.light.600:#6D28D9Birch Darkpurple.dark.600:#B79DF7Coral Lightorange.light.600:#C2410CCoral Darkorange.dark.600:#F7A67F
Focus ring Changes with theme	component.input-group.focus-ringcolor.border.focusvar(--input-group-focus-ring)	Aster Lightteal.light.600:#0F766EAster Darkteal.dark.600:#7FCFC6Birch Lightpurple.light.600:#6D28D9Birch Darkpurple.dark.600:#B79DF7Coral Lightorange.light.600:#C2410CCoral Darkorange.dark.600:#F7A67F
Border invalid Changes with theme when invalid	component.input-group.border-invalidcolor.status.dangervar(--input-group-border-invalid)	Aster Lightred.light.600:#C42B2BAster Darkred.dark.600:#F28B8BBirch Lightred.light.600:#C42B2BBirch Darkred.dark.600:#F28B8BCoral Lightred.light.600:#C42B2BCoral Darkred.dark.600:#F28B8B
Focus ring invalid Changes with theme when invalid	component.input-group.focus-ring-invalidcolor.status.dangervar(--input-group-focus-ring-invalid)	Aster Lightred.light.600:#C42B2BAster Darkred.dark.600:#F28B8BBirch Lightred.light.600:#C42B2BBirch Darkred.dark.600:#F28B8BCoral Lightred.light.600:#C42B2BCoral Darkred.dark.600:#F28B8B
Gap	component.input-group.gapspace.gap.defaultvar(--input-group-gap)	space.12:0.75rem
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.16:1rem
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)	Aster Lightslate-deep.light.600:#4B5A6FAster Darkslate-deep.dark.400:#96A3B5Birch Lightslate-deep.light.600:#4B5A6FBirch Darkslate-deep.dark.400:#96A3B5Coral Lightslate-deep.light.600:#4B5A6FCoral Darkslate-deep.dark.400:#96A3B5
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.16:1rem
End padding right	component.input-group.inline.end.padding-rightspace.inset.control-xvar(--input-group-inline-end-padding-right)	space.16:1rem
Block
Start padding x	component.input-group.block.start.padding-xspace.inset.control-xvar(--input-group-block-start-padding-x)	space.16:1rem
Start padding top	component.input-group.block.start.padding-topspace.inset.control-xvar(--input-group-block-start-padding-top)	space.16:1rem
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.16:1rem
End padding x	component.input-group.block.end.padding-xspace.inset.control-xvar(--input-group-block-end-padding-x)	space.16:1rem
End padding bottom	component.input-group.block.end.padding-bottomspace.inset.control-xvar(--input-group-block-end-padding-bottom)	space.16:1rem
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.16:1rem
Xs
Height	component.input-group.xs.heightsize.control.compactvar(--input-group-xs-height)	size.36:2.25rem
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.44:2.75rem
Gap	component.input-group.sm.gapcomponent-spacing-map.x2var(--input-group-sm-gap)	space.8:0.5rem
Corner Changes with theme	component.input-group.sm.radiusradius.controlvar(--input-group-sm-radius)	Aster Lightradius.4:0.25remAster Darkradius.4:0.25remBirch Lightradius.12:0.75remBirch Darkradius.12:0.75remCoral Lightradius.999:9999pxCoral Darkradius.999:9999px
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.44:2.75rem
Control
Padding, top and bottom	component.input-group.control.padding-yspace.inset.control-xvar(--input-group-control-padding-y)	space.16:1rem
From the system
Edge Changes with theme	color.border.default straight from the system, through --border	Aster Lightslate-deep.light.200 · #E2E8F0Aster Darkslate-deep.dark.100 · #1E293BBirch Lightslate-deep.light.200 · #E2E8F0Birch Darkslate-deep.dark.100 · #1E293BCoral Lightslate-deep.light.200 · #E2E8F0Coral Darkslate-deep.dark.100 · #1E293B