Skip to content
TrademarkTrademark
Docs
Form Controls

InteractiveDetails

Updated: October 11, 2026
View on GitHub

The InteractiveDetails component is a utility component used to display labels and descriptions for interactive form elements such as checkboxes and radio buttons. It provides consistent styling and behavior for these elements.

Usage

The InteractiveDetails component is primarily used as a building block for form controls like Checkbox, RadioButton and Switch to provide consistent labeling and description functionality.

Tooltip

Add a help tooltip to provide additional information about the form control.

Naming the control

A control beside InteractiveDetails should be named by its label alone, and described by its description. Checkbox, Switch and RadioButton already do this; for a control of your own, note that id covers the whole block, help button included, and point the control at the two texts instead: labelId goes on the label text and descriptionId on the description.

API reference

Type
Default
label
The main text.
React.ReactNode—
description
Supporting text under it.
React.ReactNode—
disabled
Dim it and block the click.
boolean—
iconButtonProps
Passed through to the info control.
IconButtonProps—
onClick
Called when the text is clicked, so the label activates the control it belongs to.
() => void—
className
string—
id
Element id on the whole block.
string—
labelId
Id on the label text alone, for the control's aria-labelledby.
string—
descriptionId
Id on the description text, for the control's aria-describedby.
string—
Edit this page on GitHub