Nebula

radio-button

Radio buttons allow a user to choose a single option from a list. Use radio buttons when the user needs to see all available options. Radio buttons should have the most commonly used option selected by default.

Import

import { RadioButtonGroup } from '@xpanseinc/nebula'

Radio Button Group

RadioButtonGroup is a wrapper component used to group RadioButton components.

Default

Home type
<RadioButtonGroup
  label="Home type"
  selected="singleFamily"
  options={[
    { value: 'singleFamily', label: 'Single Family' },
    { value: 'townhouse', label: 'Townhouse' },
    { value: 'condo', label: 'Condo' },
    { value: 'multiFamily', label: 'Multi-family (2-4 units)' },
  ]}
/>

Horizontal Orientation

Home type
<RadioButtonGroup
  orientation="horizontal"
  label="Home type"
  selected="singleFamily"
  options={[
    { value: 'singleFamily', label: 'Single Family' },
    { value: 'townhouse', label: 'Townhouse' },
    { value: 'condo', label: 'Condo' },
    { value: 'multiFamily', label: 'Multi-family (2-4 units)' },
  ]}
/>

With helper text in RadioButtonGroup

Home type

Please choose the type of home you're looking to purchase.

<RadioButtonGroup
  label="Home type"
  selected="singleFamily"
  options={[
    { value: 'singleFamily', label: 'Single Family' },
    { value: 'townhouse', label: 'Townhouse' },
    { value: 'condo', label: 'Condo' },
    { value: 'multiFamily', label: 'Multi-family (2-4 units)' },
  ]}
  helperText="Please choose the type of home you're looking to purchase."
/>

With helper text on a specific RadioButton

Home type

Only select this if you want a Single Family home

<RadioButtonGroup
  label="Home type"
  selected="singleFamily"
  options={[
    {
      value: 'singleFamily',
      label: 'Single Family',
      helperText: 'Only select this if you want a Single Family home',
    },
    { value: 'townhouse', label: 'Townhouse' },
    { value: 'condo', label: 'Condo' },
    { value: 'multiFamily', label: 'Multi-family (2-4 units)' },
  ]}
/>

With tooltip on a specific RadioButton

Home type
<RadioButtonGroup
  label="Home type"
  selected="singleFamily"
  options={[
    {
      value: 'singleFamily',
      label: 'Single Family',
      tooltip: 'Some less important, but clarifying text',
    },
    { value: 'townhouse', label: 'Townhouse' },
    { value: 'condo', label: 'Condo' },
    { value: 'multiFamily', label: 'Multi-family (2-4 units)' },
  ]}
/>

Invalid

Home type
<RadioButtonGroup
  label="Home type"
  invalid
  error="Only single family home loans are supported at this time"
  options={[
    { value: 'singleFamily', label: 'Single Family' },
    { value: 'townhouse', label: 'Townhouse' },
    { value: 'condo', label: 'Condo' },
    { value: 'multiFamily', label: 'Multi-family (2-4 units)' },
  ]}
/>

Disabled

Home type
<RadioButtonGroup
  label="Home type"
  selected="singleFamily"
  disabled
  options={[
    { value: 'singleFamily', label: 'Single Family' },
    { value: 'townhouse', label: 'Townhouse' },
    { value: 'condo', label: 'Condo' },
    { value: 'multiFamily', label: 'Multi-family (2-4 units)' },
  ]}
/>

onChange event

Home type
<RadioButtonGroup
  label="Home type"
  selected="singleFamily"
  options={[
    { value: 'singleFamily', label: 'Single Family' },
    { value: 'townhouse', label: 'Townhouse' },
    { value: 'condo', label: 'Condo' },
    { value: 'multiFamily', label: 'Multi-family (2-4 units)' },
  ]}
  onChange={({ value, name }) => {
    console.log({ value, name })
  }}
/>