InputGroup API

API documentation for InputGroup component

InputGroupRoot#

Props#

Defines valid properties in InputGroup component.

Prop	Default	Type
`ref`	—	`Ref<unknown>`
The reference to the component instance.
`pIf`	`true`	`boolean`
Whether the component should be rendered.
`style`	—	`CSSProperties` \| `((instance?: InputGroupRootInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: InputGroupRootInstance) => string)`
The class name to apply to the component.
`as`	—	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`
The component type to render.
`asChild`	`false`	`boolean`
Whether the component should be rendered as a child component.
`instance`	—	`InputGroupRootInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<InputGroupRootPassThrough>`
The pass-through props to pass to the component.
`ptOptions`	—	`PassThroughOptions`
The pass-through options to pass to the component.
`unstyled`	—	`boolean`
Whether the component should be rendered without classes.
`dt`	—	`unknown`
The design token to use for the component.
`styles`	—	`StylesOptions<ComponentInstance>`
The styles to use for the component.
`render`	—	`(instance: InputGroupRootInstance) => ReactNode`
The render function to render the component with instance access.
`children`	—	`any`
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	—	`any`
`pt-{optionName}-*`	—	`-`
Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by InputGroup component.

Prop	Type
`rootProps`	`useInputGroupRootProps`
Pre-built data attribute props for the root element.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InputGroup component.

Prop	Type
`root`	`InputGroupRootPassThroughType<HTMLAttributes<HTMLDivElement>>`
Used to pass attributes to the root's DOM element.
`addon`	`InputGroupRootPassThroughType<HTMLAttributes<HTMLDivElement>>`
Used to pass attributes to the addon's DOM element.

Types#

Instance

Instance of InputGroup component.

Values
`ComponentInstance<InputGroupRootProps, InputGroupRootState, InputGroupRootExposes>`

InputGroupAddon#

Props#

Defines valid properties in InputGroupAddon component.

Prop	Default	Type
`ref`	—	`Ref<unknown>`
The reference to the component instance.
`pIf`	`true`	`boolean`
Whether the component should be rendered.
`style`	—	`CSSProperties` \| `((instance?: InputGroupAddonInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: InputGroupAddonInstance) => string)`
The class name to apply to the component.
`as`	—	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`
The component type to render.
`asChild`	`false`	`boolean`
Whether the component should be rendered as a child component.
`instance`	—	`InputGroupAddonInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<InputGroupAddonPassThrough>`
The pass-through props to pass to the component.
`ptOptions`	—	`PassThroughOptions`
The pass-through options to pass to the component.
`unstyled`	—	`boolean`
Whether the component should be rendered without classes.
`dt`	—	`unknown`
The design token to use for the component.
`styles`	—	`StylesOptions<ComponentInstance>`
The styles to use for the component.
`render`	—	`(instance: InputGroupAddonInstance) => ReactNode`
The render function to render the component with instance access.
`children`	—	`any`
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	—	`any`
`pt-{optionName}-*`	—	`-`
Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by InputGroupAddon component.

Prop	Type
`inputgroup`	`InputGroupRootInstance`
Instance of the InputGroup component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InputGroupAddon component.

Prop	Type
`root`	`InputGroupAddonPassThroughType<HTMLAttributes<HTMLDivElement>>`
Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of InputGroupAddon component.

Values
`ComponentInstance<InputGroupAddonProps, InputGroupAddonState, InputGroupAddonExposes>`

useInputGroup#

Props#

State#

Exposes#

Defines the methods and properties exposed by useInputGroup.

Prop	Type
`rootProps`	`useInputGroupRootProps`
Pre-built data attribute props for the root element.

Interfaces#

Types#

Instance

Instance of useInputGroup headless.

Values
`HeadlessInstance<useInputGroupProps, useInputGroupState, useInputGroupExposes>`