Chip API

API documentation for Chip component

ChipRoot#

Props#

Defines valid properties in Chip component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ChipRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ChipRootInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ChipRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ChipRootInstance) => ReactNode)	null	The children to render.
onRemove	(event: useChipRemoveEvent) => void	null	Callback fired when the chip is removed.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Chip component.

name	type	default	description
visible	boolean	null	The visibility state of the chip.

Exposes#

Defines the methods and properties exposed by Chip component.

name	type	default	description
state	useChipState	null	The state of the useChip.
close	(event: SyntheticEvent<HTMLElement>) => void	null	Closes the chip.
removeIconProps	{ onKeyDown: (event: KeyboardEvent<HTMLElement>) => void }	null	Props for the remove icon.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Chip component.

name	type	default	description
root	ChipRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
icon	ChipRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the icon's DOM element.
image	ChipRootPassThroughType<HTMLAttributes<HTMLImageElement>>	null	Used to pass attributes to the image's DOM element.
label	ChipRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the label's DOM element.
removeIcon	ChipRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the remove icon's DOM element.

Types#

Instance

Instance of Chip component.

values
ComponentInstance<ChipRootProps, ChipRootState, ChipRootExposes>

ChipIcon#

Props#

Defines valid properties in ChipIcon component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ChipIconInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ChipIconInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ChipIconPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ChipIconInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by ChipIcon component.

name	type	default	description
chip	ChipRootInstance	null	The Chip component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ChipIcon component.

name	type	default	description
root	ChipIconPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ChipIcon component.

values
ComponentInstance<ChipIconProps, ChipIconState, ChipIconExposes>

ChipLabel#

Props#

Defines valid properties in ChipLabel component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ChipLabelInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ChipLabelInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ChipLabelPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ChipLabelInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ChipLabel component.

name	type	default	description
chip	ChipRootInstance	null	The Chip component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ChipLabel component.

name	type	default	description
root	ChipLabelPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ChipLabel component.

values
ComponentInstance<ChipLabelProps, ChipLabelState, ChipLabelExposes>

ChipImage#

Props#

Defines valid properties in ChipImage component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ChipImageInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ChipImageInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ChipImagePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ChipImageInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ChipImage component.

name	type	default	description
chip	ChipRootInstance	null	The Chip component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ChipImage component.

name	type	default	description
root	ChipImagePassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ChipImage component.

values
ComponentInstance<ChipImageProps, ChipImageState, ChipImageExposes>

ChipRemoveIcon#

Props#

Defines valid properties in ChipRemoveIcon component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ChipRemoveIconInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ChipRemoveIconInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ChipRemoveIconPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ChipRemoveIconInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ChipRemoveIcon component.

name	type	default	description
chip	ChipRootInstance	null	The Chip component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ChipRemoveIcon component.

name	type	default	description
root	ChipRemoveIconPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ChipRemoveIcon component.

values
ComponentInstance<ChipRemoveIconProps, ChipRemoveIconState, ChipRemoveIconExposes>

useChip#

Props#

Defines valid properties in useChip.

name	type	default	description
onRemove	(event: useChipRemoveEvent) => void	null	Callback fired when the chip is removed.

State#

Defines valid state in useChip.

name	type	default	description
visible	boolean	null	The visibility state of the chip.

Exposes#

Defines the methods and properties exposed by useChip.

name	type	default	description
state	useChipState	null	The state of the useChip.
close	(event: SyntheticEvent<HTMLElement>) => void	null	Closes the chip.
removeIconProps	{ onKeyDown: (event: KeyboardEvent<HTMLElement>) => void }	null	Props for the remove icon.

Events#

useChipRemoveEvent

Event fired when the chip's remove icon is clicked.

name	type	description
originalEvent	E	The original event that triggered the change.

Types#

Instance

Instance of useChip headless.

values
HeadlessInstance<useChipProps, useChipState, useChipExposes>