Radio

Radio buttons are most commonly used in groups, to allow a user to pick one of several grouped options. For example, selecting whether a template field is shared or private

Best practices

  • When changing a setting, radio buttons should always be accompanied with a label.
  • Labels should be descriptive enough, that they can stand up on their own.

Usage

import {Radio} from '@kalo/ui';

<Radio
  label="Enable email notifications"
  checked={true}
  onClick={myClickFunction}
/>

Props

NameTypeDescription
checked
boolIs the radio button checked
size
enumChanges the size of the radio ('small' | 'medium')
disabled
boolDisables user interaction
label
unionA label to display to the right of the radio button
onClick
funcA function to call when a user clicks
name
stringA name to pass down to the DOM - useful for testing
hint
stringA secondary label to display under the label

Radio

A standard radio button

<span> <Radio checked={true} label="Turn off notifications" /> <br /> <Radio checked={false} label="Enable email notifications" /> </span>

Disabled

A disabled radio button
<span> <Radio checked={true} disabled={true} label="Turn off notifications" /> <Radio checked={false} disabled={true} label="Enable email notifications" /> </span>

Sizing

Radio buttons can some in two sizes: small, and medium.
<span> <Radio checked={true} label="Turn off notifications" size="small" /> <Radio checked={false} label="Enable email notifications" size="medium" /> </span>

With hint

<span> <Radio checked={false} hint="This will override any previous settings" label="Enable email notifications" marginBottom={8} size="medium" /> <Radio checked={true} label="Turn off notifications" size="small" /> </span>