Radio

Radio buttons are used when only one choice may be selected in a series of options.

Import

import { Radio } from '@trendmicro/react-styled-ui';import { Radio } from '@trendmicro/react-styled-ui';

Usage


EDITABLE EXAMPLE
<Radio>Radio button</Radio><Radio>Radio button</Radio>

Colors

Use the variantColor prop to change the color scheme of a radio button. variantColor can be any color key with key 50 (hover) or 60 (checked) that exist in theme.colors.


EDITABLE EXAMPLE
<Stack direction="row" spacing="3x">
  <Radio variantColor="red" defaultChecked>Radio</Radio>
  <Radio variantColor="green" defaultChecked>Radio</Radio>
</Stack><Stack direction="row" spacing="3x">
  <Radio variantColor="red" defaultChecked>Radio</Radio>
  <Radio variantColor="green" defaultChecked>Radio</Radio>
</Stack>

Sizes

Use the size prop to change the radio button size. You can set the value to sm, md, or lg.


EDITABLE EXAMPLE
<Stack direction="column" spacing="1x" shouldWrapChildren>
  <Radio size="sm" name="1">Radio</Radio>
  <Radio size="md" name="1">Radio</Radio>
  <Radio size="lg" name="1">Radio</Radio>
</Stack><Stack direction="column" spacing="1x" shouldWrapChildren>
  <Radio size="sm" name="1">Radio</Radio>
  <Radio size="md" name="1">Radio</Radio>
  <Radio size="lg" name="1">Radio</Radio>
</Stack>

States


EDITABLE EXAMPLE
<Stack direction="row" spacing="3x">
  <Radio checked={false}>Radio</Radio>
  <Radio defaultChecked>Radio</Radio>
  <Radio disabled>Radio</Radio>
  <Radio disabled defaultChecked>Radio</Radio>
</Stack><Stack direction="row" spacing="3x">
  <Radio checked={false}>Radio</Radio>
  <Radio defaultChecked>Radio</Radio>
  <Radio disabled>Radio</Radio>
  <Radio disabled defaultChecked>Radio</Radio>
</Stack>

Props

Name	Type	Default	Description
id	string		The id attribute of the input field.
name	string		The name of a input field in a series of radio buttons. The name is useful for form submissions.
value	string \| number		The value for radio button input. This is the return value for form submissions.
variantColor	string		The color of the radio button when it is selected. The color should be one of the color keys in the theme (for example, `'green'`, `'red'`)
size	string	'md'	The size (width and height) of a radio button. Acceptable values: `'sm'`, `'md'`, `'lg'`
defaultChecked	boolean		If `true`, the radio button will be selected initially.
checked	boolean		If `true`, the radio button will be selected. Use `onChange` to update the state for a controlled component.
disabled	boolean		If `true`, the radio button will be disabled. This sets `aria-disabled=true` and you can set this state by using the `_disabled` prop.
children	ReactNode		The children of the radio button.
onChange	function		A callback called when the state is changed.
onBlur	function		A callback called when the radio button loses focus.
onFocus	function		A callback called when the radio button receives focus.