## Feature Examples

### Structure
- description: The component consists of a list of options with radio buttons wrapped inside `<RadioGroup>`. Option labels are plain text by default, but they can be replaced with any other component or set of components.
- example:
```jsx
<RadioGroup value={1}>
  <RadioGroup.Radio value={1}>Option 1</RadioGroup.Radio>
  <RadioGroup.Radio value={2}>Option 2</RadioGroup.Radio>
  <RadioGroup.Radio value={3}>Option 3</RadioGroup.Radio>
  <RadioGroup.Radio value={4}>Option 4</RadioGroup.Radio>
</RadioGroup>;
```

### Size
- description: Adjust the component size using the size prop. It supports 2 sizes: `medium` (default) - use in all common cases `small` - use in more dense layouts
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <RadioGroup size="medium" value={1}>
    <RadioGroup.Radio value={1}>Option 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Option 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Option 3</RadioGroup.Radio>
  </RadioGroup>
  <RadioGroup size="small" value={1}>
    <RadioGroup.Radio value={1}>Option 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Option 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Option 3</RadioGroup.Radio>
  </RadioGroup>
</StorybookComponents.Stack>;
```

### Layout
- description: Control the layout of the options with the `display` prop. Choose from 2 layouts: - For most common cases, use the default `vertical`. - Use `horizontal` for options with short labels (e.g., Yes/No selections in a form), or when there is limited space.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <RadioGroup value={1} display="vertical">
    <RadioGroup.Radio value={1}>Vertical 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Vertical 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Vertical 3</RadioGroup.Radio>
  </RadioGroup>
  <RadioGroup value={1} display="horizontal">
    <RadioGroup.Radio value={1}>Horizontal 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Horizontal 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Horizontal 3</RadioGroup.Radio>
  </RadioGroup>
</StorybookComponents.Stack>;
```

### Spacing
- description: Control the pixel spacing between options with the `spacing` prop.
- example:
```jsx
<StorybookComponents.Stack gap="72px">
  <RadioGroup spacing="12px">
    <RadioGroup.Radio value={1}>Option 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Option 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Option 3</RadioGroup.Radio>
  </RadioGroup>
  <RadioGroup spacing="18px">
    <RadioGroup.Radio value={1}>Option 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Option 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Option 3</RadioGroup.Radio>
  </RadioGroup>
  <RadioGroup spacing="24px">
    <RadioGroup.Radio value={1}>Option 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Option 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Option 3</RadioGroup.Radio>
  </RadioGroup>
</StorybookComponents.Stack>;
```

### Button alignment
- description: Control how the radio buttons align to the text with the `vAlign` prop. Choose from 2 alignments: - `center` (the default) aligns the radio button to the middle of the text. It is recommended for most common cases. - `top` aligns the radio buttons to the top of the text. This is good for options that go over 3 or more lines of text.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <RadioGroup vAlign="center">
    <RadioGroup.Radio>
      <Heading size="small">Center aligned radio</Heading>
      <Text secondary size="small">
        Subtitle
      </Text>
    </RadioGroup.Radio>
  </RadioGroup>
  <RadioGroup vAlign="top">
    <RadioGroup.Radio>
      <Heading size="small">Top aligned radio</Heading>
      <Text secondary size="small">
        Subtitle
      </Text>
    </RadioGroup.Radio>
  </RadioGroup>
</StorybookComponents.Stack>;
```

### Disabled buttons
- description: Radio options can be disabled in 2 ways: - Disable all options at once with `disabled`. - Choose which options to disable with `disabledRadios`.
- example:
```jsx
<StorybookComponents.Stack gap="60px">
  <RadioGroup disabled value={1}>
    <RadioGroup.Radio value={1}>All disabled</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>All disabled</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>All disabled</RadioGroup.Radio>
  </RadioGroup>
  <RadioGroup disabledRadios={[3]} value={1}>
    <RadioGroup.Radio value={1}>Selected</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Unselected</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Disabled</RadioGroup.Radio>
  </RadioGroup>
</StorybookComponents.Stack>;
```

### Status message
- description: Add text that explains the status or what action the user should take with the `statusMessage` prop. Show the status message inline, directly below the radio group by wrapping it in a `<FormField/>` and adding `statusMessage`. View more inline status message examples in `<FormField/>`.
- example:
```jsx
<FormField status="error" statusMessage="This is an error message.">
  <RadioGroup>
    <RadioGroup.Radio value={1}>Option 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Option 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Option 3</RadioGroup.Radio>
  </RadioGroup>
</FormField>;
```

### Button area
- description: Highlight the clickable area of an option by controlling the design. It's recommended to always use this on mobile. - Specify when the button area should be highlighted (on hover, always, or not at all) with `selectionArea`. - To choose a filled or outlined design, use `selectionAreaSkin`. - Define the white pixel spacing around each radio button with `selectionAreaPadding`.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <RadioGroup
    value={1}
    selectionArea="always"
    selectionAreaSkin="outlined"
    selectionAreaPadding="12px 18px"
  >
    <RadioGroup.Radio value={1}>Option 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Option 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Option 3</RadioGroup.Radio>
  </RadioGroup>
  <RadioGroup
    value={1}
    selectionArea="hover"
    selectionAreaSkin="filled"
    selectionAreaPadding="12px 18px"
  >
    <RadioGroup.Radio value={1}>Option 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Option 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Option 3</RadioGroup.Radio>
  </RadioGroup>
</StorybookComponents.Stack>;
```

### Additional content
- description: Use the `content` prop to show additional details for an option. It accepts any kind of content and places it outside of a radio option.
- example:
```jsx
<RadioGroup value={1} selectionArea="always">
  <RadioGroup.Radio
    value={1}
    content={
      <StorybookComponents.Placeholder margin={2}>
        Details about Option 1
      </StorybookComponents.Placeholder>
    }
  >
    Option 1
  </RadioGroup.Radio>
  <RadioGroup.Radio
    value={2}
    content={
      <StorybookComponents.Placeholder margin={2}>
        Details about Option 2
      </StorybookComponents.Placeholder>
    }
  >
    Option 2
  </RadioGroup.Radio>
</RadioGroup>;
```

## Common Use Case Examples

### Settings panel
- description: Only use small size radio buttons in settings panels to ensure consistency across all panels.
- example:
```jsx
() => {
  const [defaultStateselected, setDefaultStateSelected] = React.useState(1);
  const [homepageTypeSelected, setHomepageTypeSelected] = React.useState(1);

  return (
    <SidePanel maxHeight="576px" width="288px" skin="floating">
      <SidePanel.Header title="Breadcrumbs Settings" />
      <SidePanel.Content noPadding>
        <SidePanel.Field>
          <FormField label="Default state">
            <RadioGroup
              value={defaultStateselected}
              onChange={(newValue) => setDefaultStateSelected(Number(newValue))}
              size="small"
            >
              <RadioGroup.Radio value={1}>Full trail</RadioGroup.Radio>
              <RadioGroup.Radio value={2}>Hide homepage</RadioGroup.Radio>
              <RadioGroup.Radio value={3}>Hide current page</RadioGroup.Radio>
            </RadioGroup>
          </FormField>
        </SidePanel.Field>
        <SidePanel.Field>
          <FormField label="Display homepage as">
            <RadioGroup
              value={homepageTypeSelected}
              onChange={(newValue) => setHomepageTypeSelected(Number(newValue))}
              size="small"
            >
              <RadioGroup.Radio value={1}>Text</RadioGroup.Radio>
              <RadioGroup.Radio value={2}>Icon</RadioGroup.Radio>
            </RadioGroup>
          </FormField>
        </SidePanel.Field>
      </SidePanel.Content>
    </SidePanel>
  );
};
```

### Default selection
- description: Have a default option selected whenever possible, ideally a neutral choice such as "None" or "All".
- example:
```jsx
() => {
  const [selected, setSelected] = React.useState(1);

  return (
    <RadioGroup
      value={selected}
      onChange={(newValue) => setSelected(Number(newValue))}
    >
      <RadioGroup.Radio value={1}>All</RadioGroup.Radio>
      <RadioGroup.Radio value={2}>In stock</RadioGroup.Radio>
      <RadioGroup.Radio value={3}>Out of stock</RadioGroup.Radio>
    </RadioGroup>
  );
};
```

### Additional info
- description: Use `<InfoIcon/>` to add a tooltip next to an option to provide additional information.
- example:
```jsx
() => {
  const [selected, setSelected] = React.useState(2);

  return (
    <FormField label="How would you like to add tax?">
      <RadioGroup
        value={selected}
        onChange={(newValue) => setSelected(Number(newValue))}
      >
        <RadioGroup.Radio value={1}>Include in the price</RadioGroup.Radio>
        <RadioGroup.Radio value={2}>
          Add at checkout
          <Box inline>
            <InfoIcon content="Tax will not be included in the price of your plans. Customers will see the tax added on at checkout." />
          </Box>
        </RadioGroup.Radio>
      </RadioGroup>
    </FormField>
  );
};
```

### Horizontal layout
- description: Use a horizontal layout when displaying radio lists with 2-3 options and short descriptions. This layout is great for situations where vertical space is limited.
- example:
```jsx
() => {
  const [selected, setSelected] = React.useState(2);
  return (
    <CustomModalLayout
      title="Add an area for local delivery"
      subtitle="Set a delivery area within a radius or certain postal codes."
      primaryButtonText="Add Area"
      secondaryButtonText="Cancel"
      onCloseButtonClick={() => {}}
    >
      <Layout cols={1}>
        <FormField label="Area name">
          <Input placeholder="e.g., Lower East Side" />
        </FormField>
        <FormField label="Set area by">
          <RadioGroup
            display="horizontal"
            value={selected}
            onChange={(newValue) => setSelected(Number(newValue))}
          >
            <RadioGroup.Radio value={1}>Radius</RadioGroup.Radio>
            <RadioGroup.Radio value={2}>Postal codes</RadioGroup.Radio>
          </RadioGroup>
        </FormField>
        <FormField label="Add postal codes that all have the same delivery rate">
          <InputArea placeholder="Separate postal codes with commas, e.g., 10002, 10003, 10009" />
        </FormField>
      </Layout>
    </CustomModalLayout>
  );
};
```

### Custom button
- description: Other components can also be used in radio option labels (e.g., avatar, illustration, additional text).
- example:
```jsx
() => {
  const [selected, setSelected] = React.useState(1);
  return (
    <Card>
      <Card.Header
        title="Business type"
        subtitle="Define your business type for legal purposes."
      />
      <Card.Divider />
      <Card.Content>
        <RadioGroup
          selectionArea="always"
          selectionAreaSkin="outlined"
          selectionAreaPadding="18px"
          spacing="12px"
          value={selected}
          onChange={(newValue) => setSelected(Number(newValue))}
        >
          <RadioGroup.Radio value={1}>
            <Box gap={2} verticalAlign="middle">
              <Avatar />
              <Box direction="vertical">
                <Text weight="normal">Individual</Text>
                <Text size="small">
                  You own and run the business with a personal bank account.
                </Text>
              </Box>
            </Box>
          </RadioGroup.Radio>
          <RadioGroup.Radio value={2}>
            <Box gap={2} verticalAlign="middle">
              <Avatar shape="square" />
              <Box direction="vertical">
                <Text weight="normal">Partnership, LLC or Corporation</Text>
                <Text size="small">
                  You have a business registration number and a business bank
                  account.
                </Text>
              </Box>
            </Box>
          </RadioGroup.Radio>
        </RadioGroup>
      </Card.Content>
    </Card>
  );
};
```