React component to build flexible and accessible radio buttons/elements.
Listen to Belinda Carlisle - Summer Rain while reading these docs - it will increase comprehensibility by 120%. This will increase it by 420%.
React Selected has control over select logic and state meaning that you don't have to do much! It also has the ability to add WAI-ARIA compliant and other accessibility attributes to the selectable elements.
npm install react-selected
import Selected from 'react-selected';
<Selected defaultSelectedKey="cat">
{({ getSelectableProps, selectedKey }) => (
<Buttons>
<Button color={selectedKey === 'dog' ? 'info' : null} {...getSelectableProps('dog')}>
Dog
</Button>
<Button color={selectedKey === 'cat' ? 'info' : null} {...getSelectableProps('cat')}>
Cat
</Button>
<Button color={selectedKey === 'mouse' ? 'info' : null} {...getSelectableProps('mouse')}>
Mouse
</Button>
</Buttons>
)}
</Selected>Type: string
The key of the component that should be selected by default.
Type: function({ key, value })
Function to invoke when a component is selected.
Type: string
React Selected manages select logic and state internally, but if you wish to have your own, you can control the value of selectedKey.
Type: function(key, value, props) (key is required)
Returns the props to apply to the button element you render.
Includes aria- attributes.
Type: function(key, value, props) (key is required)
Returns the props to apply to the element you render. Use this for any element other than a <button>.
Includes aria- attributes.
Type: function(key, value)
Sets selectedKey to key and sets selectedValue to value.
Type: string
The key of the current selected component.
Type: string
The value of the current selected component.
MIT © jxom