Radio buttons allow users to select a single option from a set of mutually exclusive options. They should be used within a RadioGroup for proper functionality.
import { Radio, RadioGroup } from '@ui-kitten/components';
import React from 'react';
import { Radio } from '@ui-kitten/components';
export const RadioExample = () => {
const [checked, setChecked] = React.useState(false);
return (
<Radio
checked={checked}
onChange={nextChecked => setChecked(nextChecked)}
>
Option
</Radio>
);
};
Radio components should typically be used within a RadioGroup component for proper single-selection behavior.
<Radio checked={true}>
Checked
</Radio>
<Radio checked={false}>
Unchecked
</Radio>
<Radio checked={true} disabled>
Disabled Checked
</Radio>
<Radio checked={false} disabled>
Disabled Unchecked
</Radio>
<Radio status='primary' checked={true}>
Primary
</Radio>
<Radio status='success' checked={true}>
Success
</Radio>
<Radio status='info' checked={true}>
Info
</Radio>
<Radio status='warning' checked={true}>
Warning
</Radio>
<Radio status='danger' checked={true}>
Danger
</Radio>
<Radio status='control' checked={true}>
Control
</Radio>
Whether the radio button is checked.
onChange
(checked: boolean) => void
Called when the radio button should switch its value.
children
RenderProp<TextProps> | React.ReactText
String, number or a function component to render next to the radio button. If it is a function, expected to return a Text component.
Status of the component. Can be basic, primary, success, info, warning, danger or control.
Whether the radio button is disabled.
Form Examples
Single Radio
import React from 'react';
import { Radio, Layout } from '@ui-kitten/components';
const SingleRadioExample = () => {
const [accepted, setAccepted] = React.useState(false);
return (
<Layout style={{ padding: 16 }}>
<Radio
checked={accepted}
onChange={setAccepted}
>
I agree to the terms and conditions
</Radio>
</Layout>
);
};
For most use cases, you should use RadioGroup instead of individual Radio components. See the RadioGroup documentation for group selection examples.
