RadioGroup

import { Radio } from '@concur/nui-widgets';
import { RadioGroup } from '@concur/nui-widgets';

RadioGroup is a type of FormGroup that groups a collection of radio buttons into a single input value. Radio is a specialized form control that emits an <input> with a type of radio.

Examples

Sizes

Three sizes are supported: 'lg' (the default), 'md' and 'sm'. Use the size property to set the size.

<RadioGroup
    label='Select an option'>
    <Radio>Option 1</Radio>
    <Radio>Option 2</Radio>
    <Radio>Option 3</Radio>
</RadioGroup>

<RadioGroup
    label='Select an option'
    size='md'>
    <Radio>Option 1</Radio>
    <Radio>Option 2</Radio>
    <Radio>Option 3</Radio>
</RadioGroup>

<RadioGroup
    label='Select an option'
    size='sm'>
    <Radio>Option 1</Radio>
    <Radio>Option 2</Radio>
    <Radio>Option 3</Radio>
</RadioGroup>

Inline

Inline radio buttons will be shown on the same horizontal row rather than stacked. Use the inline property for this option.

<RadioGroup
    inline
    label='Select an option'>
    <Radio>Option 1</Radio>
    <Radio>Option 2</Radio>
    <Radio>Option 3</Radio>
</RadioGroup>

Required

Use the required property to mark radio groups as required.

<RadioGroup
    label='Select an option'
    required>
    <Radio>Option 1</Radio>
    <Radio>Option 2</Radio>
    <Radio>Option 3</Radio>
</RadioGroup>

Validation States

Validation state properties apply only to RadioGroup components (not individual Radio components). The validation tooltip will be triggered when hovering over the icon next to the radio group label. Use the validationMessage property to set a validation state.

<RadioGroup
    label='Select an option'
    validationMessage={{ state: 'warning', text: 'Validation warning message' }}>
    <Radio>Option 1</Radio>
    <Radio>Option 2</Radio>
    <Radio>Option 3</Radio>
</RadioGroup>

<RadioGroup
    label='Select an option'
    validationMessage={{ state: 'error', text: 'Validation error message' }}>
    <Radio>Option 1</Radio>
    <Radio>Option 2</Radio>
    <Radio>Option 3</Radio>
</RadioGroup>

Help Text

Use the RadioGroup.HelpBlock component as a child of RadioGroup to add help text.

<RadioGroup label='Select an option'>
    <Radio>Option 1</Radio>
    <Radio>Option 2</Radio>
    <RadioGroup.HelpBlock>Help text</RadioGroup.HelpBlock>
</RadioGroup>

<RadioGroup inline label='Select an option'>
    <Radio>Option 1</Radio>
    <Radio>Option 2</Radio>
    <RadioGroup.HelpBlock>Help text</RadioGroup.HelpBlock>
</RadioGroup>

Disabled State

Use the disabled property to disable a radio button. A disabled element is unusable and un-clickable.

<RadioGroup label='Select an option'>
    <Radio disabled>Option 1</Radio>
    <Radio disabled>Option 2</Radio>
</RadioGroup>

ReadOnly State

ReadOnly is not a supported state for the RadioGroup component.

Usage

RadioGroup

Properties

Property Type Default Description
children Node Required Collection of Radio components to be included in the radio group.
label Node Required Content to show as the “label” of the radio group. This will be styled like a <label> element, but will be a <div> element since each radio button already has its own <label> element.
className String   Any custom classes to add to the radio group <div> element.
inline Boolean false When true, radio buttons will be shown on the same row rather than stacked.
name String   Sets the name attribute on the <input> elements (same name will be applied to each radio button).
required Boolean false Will pass the required property to all child components (labels and input controls).
size String 'lg' Size of child elements within the radio group (labels and input controls). Options are 'lg', 'md', 'sm'.
validationMessage Object   An object identifying a validation message. The object will include properties for state and text; e.g., { state: 'warning', text: 'This is your last warning' }. The options for state are 'error' and 'warning'. text is the message shown in the validation tooltip; as with all text, it must be localized.

Callbacks

Property Parameters Description
onChange event Callback function for onChange events. This can be used as a single callback shared by each Radio child component.

Radio

Properties

Property Type Default Description
children Node Required Content to show as the label of the radio button.
checked Boolean false When true, radio button will appear “checked”.
disabled Boolean false When true, radio button will be marked as disabled.
inline Boolean false When true, radio buttons will be shown on the same row rather than stacked.
value String   Sets the value attribute of the <input> element. This value can be accessed from event.target.value in the onChange callback.

Callbacks

Property Parameters Description
onChange event Callback function for onChange events. This will override the onChange callback from the RadioGroup component.