Input group

A group of inputs with optional prefix and suffix.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/input-group

Lineage

Shadcn

Docs

Spoke

Anatomy

import { InputGroup, InputGroupAddon } from "@/components/ui/input-group"
import { Input } from "@/components/ui/input"

export default () => (
	<InputGroup>
		<InputGroupAddon />
		<Input />
	</InputGroup>
)

Spoke utility classes

Class	Fallback chain	Description
`--input-group-radius`	`var(--input-radius, var(--radius-md))`	Border radius for group
`--input-group-border`	`var(--input-border, var(--input))`	Border colour for group input variant
`--input-group-background`	`var(--input-background, transparent)`	Background colour for group input variant
`--shadow-input-group`	`var(--input-shadow, var(--shadow-xs))`	Box shadow for input group