RadioGroup

Use this component when user must make a decision, which may result in additional consecutive decisions, or may reveal additional information.

With additional content

When option is selected, more information is revealed

<RadioGroup defaultValue="PICKUP">
  <BorderedRadio value="SHIP" label="Provide shipping address" />
  <BorderedRadio value="PICKUP" label="Arrange for pickup">
    <Sans size="2" color="black60">
      After you place your order, you’ll be appointed an Artsy Specialist within
      2 business days to handle pickup logistics.
    </Sans>
  </BorderedRadio>
</RadioGroup>

When option is selected, and contains an input, the input is active upon radio selection.

No items pre-selected

<RadioGroup>
  <Radio value="SHIP" label="Provide shipping address" />
  <Radio value="PICKUP" label="Arrange for pickup" />
</RadioGroup>

With default value

<RadioGroup defaultValue="PICKUP">
  <Radio value="SHIP" label="Provide shipping address" />
  <Radio value="PICKUP" label="Arrange for pickup" />
</RadioGroup>

Deselectable

<RadioGroup defaultValue="SHIP" deselectable>
  <Radio value="SHIP" label="Provide shipping address" />
  <Radio value="PICKUP" label="Arrange for pickup" />
</RadioGroup>

Disabled

<RadioGroup defaultValue="SHIP" disabled>
  <Radio value="SHIP" label="Provide shipping address" />
  <Radio value="PICKUP" label="Arrange for pickup" />
</RadioGroup>

Disabled with text

Delivery not available
<RadioGroup defaultValue="SHIP" disabled disabledText="Delivery not available">
  <Radio value="SHIP" label="Provide shipping address" />
  <Radio value="PICKUP" label="Arrange for pickup" />
</RadioGroup>
On this page
With additional content
No items pre-selected
With default value
Deselectable
Disabled
Disabled with text