InputGroup

New link

Website

https://axiom.dev

Phone

🇫🇷 +33

6 12 34 56 78

Weight

72kg

Invite

name@company.com

Send

Installation

npx axiom add input-group

pnpm dlx axiom add input-group

yarn dlx axiom add input-group

bun x axiom add input-group

Also copies input, whose tokens draw the group border and text, and button.

What it does

InputGroup places inputs and addons (a currency label, a unit, a button) side by side so they read as one field. The group draws the border; the inputs inside drop theirs.

Usage

import { InputGroup } from "@/components/ui/input-group";

<InputGroup>
	<InputGroup.Addon>https://</InputGroup.Addon>
	<InputGroup.Separator />
	<InputGroup.Input placeholder="example.com" />
</InputGroup>;

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Any mix of `InputGroup.Input`, `InputGroup.Addon`, `InputGroup.Button` and `InputGroup.Separator`.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Fixed height of the whole group from the `input` size tokens: 50, 56 or 64pt; children follow it.
`error`	`boolean`	`false`	Red border around the whole group.
`disabled`	`boolean`	`false`	Disables every input and button in the group.
`style`	`StyleProp<ViewStyle>`	—	Extra styles for the container.

The focused border is drawn around the whole group as soon as one of its inputs has focus.

InputGroup.Input

Every Input prop except invalid and size, which belong to the group. For a label or an error, wrap the group in a Field.

Prop	Type	Default	Description
`flex`	`number`	`1`	Share of the remaining width. Two inputs with `flex={1}` and `flex={2}` split it one third / two thirds.
`disabled`	`boolean`	`false`	Disables this input only. The group’s `disabled` disables all of them.

Without a visible label, set accessibilityLabel; the placeholder is used otherwise.

InputGroup.Addon

Prop	Type	Default	Description
`children`	`ReactNode`	—	Static text or an icon.
`onPress`	`() => void`	—	Makes the addon pressable, for example to open a country picker.
`variant`	`'subtle' \| 'plain'`	`'subtle'`	`subtle` fills the addon with `inputGroup.default.default.addon`, `plain` leaves it transparent.
`accessibilityLabel`	`string`	text content	Announced when the addon is pressable.

InputGroup.Separator

A vertical line in the group’s divider color. The group draws none on its own: put one between two parts where you want a line, and leave it out where an icon and a field should read as one.

InputGroup.Button

A Button with its radius and border removed so it sits flush in the group. Same props as Button, except size, fullWidth and asChild: the size follows the group.

Use cases

Phone number with a country picker

The addon is pressable and opens a BottomSheet with the list of countries.

Your number

We’ll text you a code to confirm it.

🇬🇧 +44

7700 900123

Send code

<InputGroup size="lg">
	<InputGroup.Addon onPress={openCountries}>
		{country.flag} {country.dialCode}
	</InputGroup.Addon>
	<InputGroup.Separator />
	<InputGroup.Input
		keyboardType="phone-pad"
		autoComplete="tel"
		value={phone}
		onChangeText={setPhone}
	/>
</InputGroup>

Field with an inline action

A button inside the group for an action that only concerns this value: copy, apply, send.

Checkout

Subtotal$64.00

Promo code

SPRING20

Apply

20% off applied: −$12.80

<InputGroup>
	<InputGroup.Input
		autoCapitalize="characters"
		value={code}
		onChangeText={setCode}
	/>
	<InputGroup.Separator />
	<InputGroup.Button variant="ghost" onPress={applyCode}>
		Apply
	</InputGroup.Button>
</InputGroup>

Two inputs as one field

A range, or an expiry date and a CVC: separate values the user reads as one line.

Add card

Card number

4242 4242 4242 4242

Expiry and CVC

08 / 2912

<InputGroup>
	<InputGroup.Input placeholder="MM / YY" keyboardType="number-pad" />
	<InputGroup.Separator />
	<InputGroup.Input
		placeholder="CVC"
		keyboardType="number-pad"
		secureTextEntry
	/>
</InputGroup>

InputGroup

On this page