Input Group

An input with icons, text or buttons attached inside its border.

Preview

Loading Preview...

bun add xiod-ui

1import {2  InputGroup,3  InputGroupAddon,4  InputGroupInput,5  InputGroupText,6  InputGroupTextarea7} from "xiod-ui/input-group";

1<InputGroup>2  <InputGroupAddon>3    <InputGroupText />4  </InputGroupAddon>5  <InputGroupInput />6</InputGroup>

Detailed documentation of properties and options.

Accepts render, plus every native <div> attribute.

Accepts render, plus every native <div> attribute.

Prop	Type	Default	Description
`align`	`"inline-end"`\|`"inline-start"`\|

"block-end"

|"block-start"

Accepts className, style and render, plus every native attribute of the element it renders.

Prop	Type	Default	Description
`defaultValue`	`string \| number \| readonly string[]`	–	The default value of the input. Use when uncontrolled.
`nativeInput`	`boolean`	–	Whether to render a plain `<input>` instead of Base UI's `Input`. A plain input doesn't register with a surrounding `Field`.
`onValueChange`	`((value: string, eventDetails: Input.ChangeEventDetails) => void)`	–	Callback fired when the `value` changes. Use when controlled.
`size`	`number`\|`"lg"`\|`"sm"`\|`"default"`	–	The size of the component.
`unstyled`	`boolean`	–	Whether to drop the border, background and focus ring, leaving only the text field. Use inside your own styled container.
`value`	`string \| number \| readonly string[]`	–	The value of the input. Use when controlled.

Accepts render, plus every native <span> attribute.

Accepts every native <textarea> attribute.

Prop	Type	Default	Description
`size`	`number`\|`"lg"`\|`"sm"`\|`"default"`	–	The size of the component.
`unstyled`	`boolean`	–	Whether to drop the border, background and focus ring, leaving only the text field. Use inside your own styled container.