Skip to content
Telescope
Components

Radio group

A form element that enables users to select a single value from a list of options.

Basic usage

Information:
We promote usage of this component in combination with our Form control component to maintain layout consistency and ensure form accessibility. The Form control supports advanced use cases such as hint text, help popovers and error messages.

First, import the necessary components.

import {RadioGroup, RadioButton} from '@pleo-io/telescope'

Then use them, like so:

<Stack space={16}>
    <Text id="role-label">Role</Text>
    <RadioGroup onValueChange={() => {}} defaultValue="employee" aria-labelledby="role-label">
        <Stack space={8}>
            <RadioButton value="employee" label="Employee" />
            <RadioButton value="admin" label="Admin" />
            <RadioButton disabled value="owner" label="Owner (disabled)" />
        </Stack>
    </RadioGroup>
</Stack>

API reference

The component accepts the following props.

PropTypeDefault
children*
enum
defaultValue
string
onValueChange*
function
value
string

Examples

See the guidelines page for information around when and why to use the various options.

Advanced use cases

Information:
We promote usage of this component in combination with our Form control component to maintain layout consistency and ensure form accessibility. The Form control supports advanced use cases such as hint text, help popovers and error messages.
<FormControl>
    <FormControl.Label>Role</FormControl.Label>
    <FormControl.RadioGroup>
        <RadioButton value="employee" label="Employee" />
        <RadioButton value="admin" label="Admin" />
    </FormControl.RadioGroup>
</FormControl>

Radio button

A radio button should never be used outside of a radio group.

API reference

PropTypeDefault
disabled
boolean
label*
string
required
boolean
skeleton
boolean
false
value*
string

Accessibility

The implementation of this component has been informed by our form accessibility guidelines.

On this page