Forms

Input group

Composes inputs and textareas with contextual prefixes, suffixes, and actions.

idle

Usage

import {
	InputGroup,
	InputGroupAddon,
	InputGroupInput,
	InputGroupText,
} from "@mizen-labs/ui";

The parts and how they nest, taken from the preview above.

<InputGroup>
	<InputGroupInput />
	<InputGroupAddon>
		<InputGroupText />
	</InputGroupAddon>
</InputGroup>

Prefixes and suffixes stay attached to their field.

Guidance	Practice
Do	Use prefixes and suffixes for units or context. Give embedded action buttons accessible names.

Guidance	Boundary
Scope	Keep the field label outside the input group. Decorative content must not replace the control's accessible name.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`children`	`ReactNode`	`—`	Inner addons, text, input, or textarea controls.
`ref`	`Ref<HTMLDivElement>`	`—`	Ref forwarded to the root group element.
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	`"inline-start"`	Positions InputGroupAddon around the control. Use block alignments with textarea.
`InputGroupInput / InputGroupTextarea`	`InputProps / TextareaProps`	`—`	Inherit their control props, including size, value, disabled, validation, and native attributes.