Skip to main content

Radio Group

Radio group allow users to select a single option from a set. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group

installversionusagestyle
yarn add @ciceksepeti/cui-radio-group1.0.0import {RadioGroup, Radio} from '@ciceksepeti/cui-radio-group'import '@ciceksepeti/cui-radio-group/style.css'

Content​

Radio buttons allow the user to select one option from a set. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group. RadioGroup is a polymorphic component. That's why can be rendered as any valid HTML tag.

Example​

Example of a default behavior of RadioGroup component. Renders as 'div' by default.

import React, { useState } from 'react';
import { RadioGroup, Radio } from '@ciceksepeti/cui-radio-group';

function Example() {
return (
<RadioGroup
as="div"
name="fruits"
orientation="horizontal"
aria-label="fruits"
>
<label htmlFor="apple" id="apple-label">
<Radio
disabled
id="apple"
value="apple"
aria-labelledby="apple-label"
/>
apple
</label>
<label htmlFor="cherry" id="cherry-label">
<Radio id="cherry" value="cherry" aria-labelledby="cherry-label" />
cherry
</label>
<label htmlFor="orange" id="orange-label">
<Radio
disabled
id="orange"
value="orange"
aria-labelledby="orange-label"
/>
orange
</label>
<label htmlFor="banana" id="banana-label">
<Radio id="banana" value="banana" aria-labelledby="banana-label" />
banana
</label>
</RadioGroup>
);
}
PREVIEW
Radio Group Default

Props​

RadioGroup Props​

RadioGroup Events​

RadioGroup Accessibility​

Radio Props​

Radio Accessibility​

Playground​

/img/codesandbox-icon

Styling​

Element Selectors​

Default Selector Values​