InteractiveDetails

Updated: May 9, 2025

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.

InteractiveDetails

Basic label

With description

This is a description for the interactive element

With help tooltip

<InteractiveDetails 
  label="Basic label" 
/>

<InteractiveDetails 
  label="With description" 
  description="This is a description for the interactive element"
/>

<InteractiveDetails 
  label="With help tooltip" 
  iconButtonProps={{ tooltip: "This is a help tooltip", tooltipPosition: "right" }}
/>

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.

Usage

Checkbox with InteractiveDetails

This checkbox uses InteractiveDetails for its label and description

Radio button with InteractiveDetails

This radio button uses InteractiveDetails for its label and description

<Checkbox 
  label="Checkbox with InteractiveDetails"
  description="This checkbox uses InteractiveDetails for its label and description"
/>

<RadioButton 
  label="Radio button with InteractiveDetails"
  description="This radio button uses InteractiveDetails for its label and description"
/>

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

Tooltip

With tooltip on top

With tooltip on right

<InteractiveDetails 
  label="With tooltip on top"
  iconButtonProps={{ 
    tooltip: "This tooltip appears on top", 
    tooltipPosition: "top" 
  }}
/>

<InteractiveDetails 
  label="With tooltip on right"
  iconButtonProps={{ 
    tooltip: "This tooltip appears on the right", 
    tooltipPosition: "right" 
  }}
/>

API reference

Prop	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	—
onClickrequired Called when the text is clicked, so the label activates the control it belongs to.	() => void	—
className	string	—
id Element id, for wiring to a control.	string	—

Form ControlsInput

Form ControlsNumberInput

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club