IconField API

API documentation for IconField component

IconFieldRoot#

Props#

Defines valid properties in IconFieldRoot 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?: IconFieldRootInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: IconFieldRootInstance) => 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`	—	`IconFieldRootInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<IconFieldRootPassThrough>`
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: IconFieldRootInstance) => 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 IconFieldRoot component.

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

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of IconFieldRoot component.

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

Types#

Instance

Instance of IconFieldRoot component.

Values
`ComponentInstance<IconFieldRootProps, IconFieldRootState, IconFieldRootExposes>`

IconFieldInset#

Props#

Defines valid properties in IconFieldInset 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?: IconFieldInsetInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: IconFieldInsetInstance) => 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`	—	`IconFieldInsetInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<IconFieldInsetPassThrough>`
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: IconFieldInsetInstance) => 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 IconFieldInset component.

Prop	Type
`iconfield`	`IconFieldRootInstance`
The IconField component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of IconFieldInset component.

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

Types#

Instance

Instance of IconFieldInset component.

Values
`ComponentInstance<IconFieldInsetProps, IconFieldInsetState, IconFieldInsetExposes>`

useIconField#

Props#

State#

Exposes#

Defines the methods and properties exposed by useIconField.

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

Interfaces#

Types#

Instance

Instance of useIconField headless.

Values
`HeadlessInstance<useIconFieldProps, useIconFieldState, useIconFieldExposes>`