Radio

What is this?

Radio buttons are tools that customize configurations. They represent a need for the user to make a choice among a few offered options. In multiple choice forms, use radio buttons for a single option to be selected. This component is always used in a RadioGroup context.

Examples

Help Text

Accounts

Accounts are disabled

Customers will only be able to check out as guests

Accounts are optional

Customers will be able to check out with a customer account or as a guest

Group Help Text

Group label

Radio 1

Radio 2

Radio 3

Radio group help text

Direction

Group label

Radio 1

Radio 2

Radio 3

Radio group help text

Disabled

Group label

Radio 1

Radio 2

Radio 3

Radio group help text

Error

Use the error prop to define whether the user input is with error or not. It is up to you to define what triggers it. Additionally, you should add a errorText to be displayed.

Group label

Radio 1

Radio 2

Radio 3

Help textError text

Optional

Group label (optional)

Radio 1

Radio 2

Radio 3

Help text

Usage

import { Radio, RadioGroup, useRadioState } from '@vtex/admin-ui'

function Example() {
  const state = useRadioState()

  return (
    <RadioGroup state={state} label="Group label">
      <Radio value="radio-1" label="Label" />
      <Radio value="radio-2" label="Label" />
      <Radio value="radio-3" label="Label" />
    </RadioGroup>
  )
}

Radio Props

Name	Type	Description	Required	Default
value	string, number	The value to be used in the radio button. This is the value that will be returned on form submission.	✅	-
label	string	Radio label	✅	-
helpText	ReactNode	Help text	🚫	-
checked	boolean	Same as the HTML checked attribute	🚫	-
disabled	boolean	Whether is disabled or not	🚫	false
id	string	Same as the HTML attribute	🚫	-
csx	StyleProp	Defines component styles	🚫	{}

RadioGroup Props

Name	Type	Description	Required	Default
state	RadioState	Return of useRadioState hook	✅	-
label	string	Group label	✅	-
helpText	ReactNode	Help text	🚫	-
errorText	ReactNode	Error text	🚫	-
error	boolean	Whether the filed is error or not	🚫	false
direction	row, column	Direction which the children are displayed	🚫	row
optional	ReactNode	Whether the field is optional or not	🚫	-
csx	StyleProp	Defines component styles	🚫	{}

useRadioState Props

A hook to help control the RadioGroup state.

Parameter Props

Name	Type	Description	Required	Default
defaultValue	string, number	The initial value of the radio group.	🚫	-
setValue	(value: RadioState["value"]) => void	Function that will be called when setting the radio value state.	🚫	-

Parameter Props

Name	Type	Description	Required	Default
value	string, number, null	The initial value of the radio group.	🚫	-
setValue	SetState<RadioState["value"]>	Sets the value state.	🚫	-

Accessibility

• Radio has the role radio.
• RadioGroup has role radiogroup.
• Radio has aria-checked set to true when it's checked. Otherwise, aria-checked is set to false.
• Always use Radio within a RadioGroup.

Do’s

1. Use them for single choice options.
2. There should always be a pre-selected option as default.
3. For more than 6 options you should use a Select.
4. Don’t be ambiguous, each option should be clear.
5. Mind the order of the options. Consider ordering them from most to least frequently used, simplest to most complex, or least to most risky.
6. Use a "None" option if you need an unselected state.
7. Consider adding an "Other" option if needed, together with a Text Input to capture the user’s needs.
8. Use titles to group related controls.
9. Add descriptions if the control is critical, or complex.
10. Lists of controls should be vertical for better scannability.

👉 For UX Writing guidelines, access https://uxwriting.vtex.com

• What is this?
• Examples
  • Help Text
  • Group Help Text
  • Direction
  • Disabled
  • Error
  • Optional