Radio Group
Radio group allows 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
| install | version | usage | style |
|---|---|---|---|
| yarn add @ciceksepeti/cui-radio-group | 0.0.11 | import {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>
);
}
Props​
RadioGroup Props​
Name | Type | Default | Required | Description |
as | string | div | - | Changes HTML tag of a visually hidden component which renders to DOM |
name | string | - | - | Represents the name of an input element |
orientation | string | horizontal | - | Dynamically controls the orientation of the radio group |
defaultValue | string | - | - | Represents the default value of an input element |
value | string | - | - | Represents the value of an input element |
children | React.ReactNode | required | The element is shown as Radio Group children |
RadioGroup Events​
Name | Type | Description |
onChange | (value: string, id?: string, name?: string) => void | Get's called when the user selects a radio button. |
RadioGroup Accessibility​
info
In order to learn more about mentioned aria tags please visit the MDN aria-label and aria-labelledby accessibility pages.
Name | Type | Description |
aria-label | string | Defines a string value as an aria-label that represents the current element. |
aria-labelledby | string | Identifies the element that labels the current element. |
Radio Props​
Name | Type | Default | Required | Description |
id | string | - | required | Unique id of the radio button |
name | string | - | required | Represents the name of an input element |
value | string | - | required | Represents the value of a radio button |
disabled | boolean | false | - | Controls whether or not the radio item is disabled. |
Radio Accessibility​
info
In order to learn more about mentioned aria tags please visit the MDN aria-label and aria-labelledby accessibility pages.
Name | Type | Description |
aria-label | string | Defines a string value as an aria-label that represents the current element. |
aria-labelledby | string | Identifies the element that labels the current element. |
Playground​
Styling​
Element Selectors​
tip
Name | Type |
[data-cui-radio-group] | Element Selector |
[data-cui-radio-group][aria-orientation='vertical'] | Element Selector |
[data-cui-radio] | Element Selector |
[data-cui-radio][data-cui-radio-selected='true'] | Element Selector |
[data-cui-radio]::after | Element and Pseudo Selectors |
[data-cui-radio-disabled='true'] | Element Selector |
[data-cui-radio-disabled='true'] | Element Selector |
[data-cui-radio-input] | Element Selector |
Default Selector Values​
[data-cui-radio-group] {
display: flex;
}
[data-cui-radio-group][aria-orientation='vertical'] {
flex-direction: column;
}
[data-cui-radio] {
width: 18px;
height: 18px;
display: flex;
margin-right: 5px;
position: relative;
border-radius: 50%;
align-items: center;
box-sizing: border-box;
justify-content: center;
border: 2px solid #52ad36;
}
[data-cui-radio][data-cui-radio-selected='true'] {
background-color: #52ad36;
}
[data-cui-radio]::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
display: inline-block;
background-color: white;
}
[data-cui-radio-disabled='true'] {
opacity: 0.5;
}
[data-cui-radio-keyboard-focus='true'] {
outline: #52ad36 auto 2px;
box-shadow: 0 0 1px 3px cornflowerblue;
}
[data-cui-radio-input] {
top: 0;
left: 0;
margin: 0;
z-index: 1;
opacity: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
position: absolute;
box-sizing: border-box;
}