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.Input placeholder="example.com" />
</InputGroup>;

Props

InputGroup

Prop	Type	Default	Description
`children`	`ReactNode`	—	Any mix of `InputGroup.Input`, `InputGroup.Addon` and `InputGroup.Button`.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Minimum height of the whole group, 32, 44 or 52pt; children follow it. Grows with larger system text.
`error`	`boolean`	`false`	Red border around the whole group.
`disabled`	`boolean`	`false`	Disables every input and button in the group.
`divided`	`boolean`	`true`	Draws a separator between adjacent parts.
`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 label, helper, error and size, which belong to the group or the surrounding form.

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.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.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.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.Input
		placeholder="CVC"
		keyboardType="number-pad"
		secureTextEntry
	/>
</InputGroup>

InputGroup

On this page