Skip to main content

​
Inline Control Group

InlineControlGroup provides a fieldset wrapper for grouping related form controls. It handles layout, labels, help text, and error messaging for groups of checkboxes, radio buttons, or similar controls.
This is primarily used internally by CheckboxGroup and RadioGroup. For most use cases, prefer those higher-level components.

​
Installation

yarn add @twilio-paste/core
Or if you need just this component: 
yarn add @twilio-paste/inline-control-group

​
Usage

import { InlineControlGroup } from '@twilio-paste/core/inline-control-group';
import { Checkbox } from '@twilio-paste/core/checkbox';

const MyComponent = () => (
  <InlineControlGroup
    legend="Select your preferences"
    helpText="Choose all that apply"
    orientation="vertical"
  >
    <Checkbox id="option1" name="preferences" value="email">
      Email notifications
    </Checkbox>
    <Checkbox id="option2" name="preferences" value="sms">
      SMS notifications
    </Checkbox>
  </InlineControlGroup>
);

​
Vertical Orientation

Stack controls vertically (default): 
import { InlineControlGroup } from '@twilio-paste/core/inline-control-group';
import { Radio } from '@twilio-paste/core/radio';

<InlineControlGroup
  legend="Choose a plan"
  orientation="vertical"
  required
>
  <Radio id="basic" name="plan" value="basic">Basic</Radio>
  <Radio id="pro" name="plan" value="pro">Pro</Radio>
  <Radio id="enterprise" name="plan" value="enterprise">Enterprise</Radio>
</InlineControlGroup>

​
Horizontal Orientation

Arrange controls horizontally: 
import { InlineControlGroup } from '@twilio-paste/core/inline-control-group';
import { Radio } from '@twilio-paste/core/radio';

<InlineControlGroup
  legend="Select size"
  orientation="horizontal"
>
  <Radio id="small" name="size" value="s">S</Radio>
  <Radio id="medium" name="size" value="m">M</Radio>
  <Radio id="large" name="size" value="l">L</Radio>
</InlineControlGroup>

​
With Error

Display validation errors: 
import { InlineControlGroup } from '@twilio-paste/core/inline-control-group';
import { Checkbox } from '@twilio-paste/core/checkbox';

<InlineControlGroup
  legend="Terms and conditions"
  errorText="You must accept the terms to continue"
  required
>
  <Checkbox id="terms" name="terms" value="accepted">
    I accept the terms and conditions
  </Checkbox>
</InlineControlGroup>

​
Required Group

import { InlineControlGroup } from '@twilio-paste/core/inline-control-group';
import { Radio } from '@twilio-paste/core/radio';

<InlineControlGroup
  legend="Contact method"
  helpText="Choose your preferred contact method"
  required
  i18nRequiredLabel="(required)"
>
  <Radio id="email" name="contact" value="email">Email</Radio>
  <Radio id="phone" name="contact" value="phone">Phone</Radio>
</InlineControlGroup>

​
Disabled Group

import { InlineControlGroup } from '@twilio-paste/core/inline-control-group';
import { Checkbox } from '@twilio-paste/core/checkbox';

<InlineControlGroup
  legend="Features"
  disabled
  helpText="Contact sales to enable these features"
>
  <Checkbox id="feature1" name="features" value="analytics">Analytics</Checkbox>
  <Checkbox id="feature2" name="features" value="api">API Access</Checkbox>
</InlineControlGroup>

​
Props

​
legend
string | ReactNode
required
The label text for the fieldset, rendered as a legend element.
​
children
ReactNode
required
The form controls (checkboxes, radio buttons, etc.) to group together.
​
orientation
'vertical' | 'horizontal'
default:"vertical"
Sets the direction in which controls are rendered.
​
helpText
string | ReactNode
Help text displayed below the legend to provide additional context.
​
errorText
string | ReactNode
Error message to display when validation fails.
​
required
boolean
default:"false"
Marks the group as required and displays the required indicator.
​
disabled
boolean
default:"false"
Disables all controls in the group.
​
i18nRequiredLabel
string
Accessible label for the required indicator on the legend.
​
fieldStyleProps
BoxStyleProps
Additional style props to apply to the field container.
​
element
string
default:"INLINE_CONTROL_GROUP"
Overrides the default element name to apply unique styles with the Customization Provider.

​
Best Practices

​
Do

  • Use for grouping related checkboxes or radio buttons
  • Provide clear, descriptive legend text
  • Use help text to clarify what the user should select
  • Show validation errors in errorText
  • Use required prop for mandatory selections
  • Choose appropriate orientation based on label length and space

​
Don’t

  • Don’t use for unrelated controls
  • Don’t nest InlineControlGroups
  • Don’t mix different types of controls in one group
  • Don’t use excessively long legends
  • Don’t rely solely on color to indicate errors

​
Accessibility

  • Uses semantic <fieldset> and <legend> HTML elements
  • Properly associates help text and error messages with the group
  • Required state is announced to screen readers
  • Disabled state is conveyed through ARIA attributes
  • Error messages are associated with the fieldset
  • Legend provides accessible name for the group

​
Related Components

Build docs developers (and LLMs) love

Get started for freeTalk to us