Set a max width on a long radio item

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

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

selectOne = "1";

  onRadioChange(event: GoabRadioGroupOnChangeDetail): void {
    this.selectOne = event.value;
  }

<form>
  <goabx-form-item label="Select one option">
    <goabx-radio-group
      name="selectOne"
      [value]="selectOne"
      (onChange)="onRadioChange($event)">
      <goabx-radio-item
        value="1"
        label="Option one which has a very long label with lots of text"
        maxWidth="300px">
      </goabx-radio-item>
      <goabx-radio-item value="2" label="Option two"></goabx-radio-item>
      <goabx-radio-item value="3" label="Option three"></goabx-radio-item>
    </goabx-radio-group>
  </goabx-form-item>
</form>

document.querySelector('goa-radio-group').addEventListener('_change', (e) => {
  e.target.value = e.detail.value;
});

<form>
  <goa-form-item version="2" label="Select one option">
    <goa-radio-group version="2" name="selectOne" value="1">
      <goa-radio-item
        value="1"
        label="Option one which has a very long label with lots of text"
        max-width="300px">
      </goa-radio-item>
      <goa-radio-item value="2" label="Option two"></goa-radio-item>
      <goa-radio-item value="3" label="Option three"></goa-radio-item>
    </goa-radio-group>
  </goa-form-item>
</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