Set a max width on a long radio item

React

Angular

Web Components

const [selectOne, setSelectOne] = useState<string>("1");

<form>
      <GoabFormItem label="Select one option">
        <GoabRadioGroup
          name="selectOne"
          value={selectOne}
          onChange={(e: GoabRadioGroupOnChangeDetail) => setSelectOne(e.value)}>
          <GoabRadioItem
            value="1"
            label="Option one which has a very long label with lots of text"
            maxWidth="300px"
          />
          <GoabRadioItem value="2" label="Option two" />
          <GoabRadioItem value="3" label="Option three" />
        </GoabRadioGroup>
      </GoabFormItem>
    </form>

Set a max width on a long radio item to control line wrapping.

When to use

Use this pattern when:

You have radio options with long labels that need width control
You want to prevent radio items from becoming too wide on large screens
You need consistent radio item sizing across different viewport sizes

Considerations

The maxWidth property accepts CSS width values like “300px” or “20ch”
Consider the reading experience when setting max widths
Ensure the max width still allows for readable label text
Use consistent max widths across similar form elements for visual harmony