input-group/props

14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

InputGroupInput API reference

InputGroupInput is a replacement for Input when building input groups. It has input group styles pre-applied and uses data-slot='input-group-control' for focus state handling. Props: className (string, optional). All other props are passed through to the underlying Input component.

InputGroupTextarea API reference

InputGroupTextarea is a replacement for Textarea when building input groups. It has textarea group styles pre-applied and uses data-slot='input-group-control' for focus state handling. Props: className (string, optional). All other props are passed through to the underlying Textarea component.

InputGroupAddon align prop usage

Use the align prop on InputGroupAddon to position the addon relative to the input. The prop accepts values: 'inline-start' (default), 'inline-end', 'block-start', or 'block-end'.

InputGroup API reference - main component

InputGroup is the main component that wraps inputs and addons. Props: className (string, optional).

InputGroupAddon API reference

InputGroupAddon displays icons, text, buttons, or other content alongside inputs. Props: align (string, values: 'inline-start' | 'inline-end' | 'block-start' | 'block-end', default: 'inline-start'), className (string, optional).

InputGroupButton API reference

InputGroup props

InputGroup component props: | Prop | Type | Default | | --- | --- | --- | | className | string | | Usage example: ```tsx <InputGroup> <InputGroupInput /> <InputGroupAddon /> </InputGroup> ```

InputGroupAddon props

InputGroupAddon component props: | Prop | Type | Default | | --- | --- | --- | | align | "inline-start" \| "inline-end" \| "block-start" \| "block-end" | "inline-start" | | className | string | | Usage example: ```tsx <InputGroupAddon align="inline-end"> <SearchIcon /> </InputGroupAddon> ``` For InputGroupInput, use inline-start or inline-end alignment. For InputGroupTextarea, use block-start or block-end alignment. The component can contain multiple InputGroupButton components and icons.

Input Group addon alignment

Use the align prop on InputGroupAddon to position the addon relative to the input. For proper focus management, InputGroupAddon should always be placed after InputGroupInput or InputGroupTextarea in the DOM, and use the align prop to visually position the addon.

InputGroup props

InputGroup component props: | Prop | Type | Default | | --- | --- | --- | | className | string | | The component wraps inputs and addons.

InputGroupAddon props

InputGroupButton props

InputGroupButton component props: | Prop | Type | Default | | --- | --- | --- | | size | "xs" \| "icon-xs" \| "sm" \| "icon-sm" | "xs" | | variant | "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link" | "ghost" | | className | string | | The component displays buttons within input groups.

InputGroupInput props

InputGroupInput component props: | Prop | Type | Default | | --- | --- | --- | | className | string | | All other props are passed through to the underlying Input component. This component has input group styles pre-applied and uses data-slot="input-group-control" for focus state handling.

InputGroupTextarea props

InputGroupTextarea component props: | Prop | Type | Default | | --- | --- | --- | | className | string | | All other props are passed through to the underlying Textarea component. This component has textarea group styles pre-applied and uses data-slot="input-group-control" for focus state handling.

Give your agent this brain