Radio

Radio buttons for single-selection within a group. Use lt-radio-group to manage a named group with a shared label, value, and validation state.

Playground

Label

Name

Value

Orientation

Helper Text

Error

Required

Theme

Variant

Size

Checked

Disabled

Required

Label

Label Position

Name

Value

Tabbable

Labels

HTMLReact

ShareCopy

Usage

<lt-radio-group label="Preferred contact" name="contact" value="email">
<lt-radio label="Email" value="email"></lt-radio>
<lt-radio label="Phone" value="phone"></lt-radio>
<lt-radio label="Post" value="post" disabled></lt-radio>
</lt-radio-group>

import { RadioGroup, Radio } from '@latty-ds/react';

<RadioGroup label="Preferred contact" name="contact" value="email">
<Radio label="Email" value="email" />
<Radio label="Phone" value="phone" />
<Radio label="Post" value="post" disabled />
</RadioGroup>

<template>
<lt-radio-group label="Preferred contact" name="contact" value="email">
  <lt-radio label="Email" value="email"></lt-radio>
  <lt-radio label="Phone" value="phone"></lt-radio>
  <lt-radio label="Post" value="post" disabled></lt-radio>
</lt-radio-group>
</template>

API — lt-radio

API — lt-radio-group