Radio

Use radio buttons to present each item in a list of options where users must make a single selection.

Usage

Code Editor
Copy
import { Radio } from '@erudilabs/alma'

Types

Code Editor
Copy
import type { RadioOptionsProps } from '@erudilabs/alma'
RadioOptionsProps<T> = { label: string; value: T; helper?: ReactNode; disable?: boolean; }[]

To make Radio options you must have an array of object and use RadioOptionsProps types like example below

Code Editor
Copy
const options: RadioOptionsProps<string> = [
  {
    label: 'Student',
    value: 'student',
  },
  {
    label: 'Guarantor',
    value: 'guarantor',
  },
]

Component

Here preview and detail explain of Radio component


Default

School type

Code Editor
Copy
<Radio label="Choose your account" name="account_type" options={options} />

Error

Choose payment method

An unexpected error occurred. Please try again later

Code Editor
Copy
<Radio label="Choose payment method" name="account_type_error" options={options} errorMessage="An unexpected error occurred. Please try again later" />

Helper

Choose your account

Someone who attends a school, college or university

Someone who agrees to pay your installment

Code Editor
Copy
<Radio label="Choose your account" name="account_type_helper" options={options} />

Props Reference

Prop
Type

testId?

string

className?

string

label?

string

name

string

options

RadioOptionsProps

errorMessage?

string

defaultValue?

string

onChange?

(e: ChangeEvent) => void

onBlur?

(e: FocusEvent) => void