Radio
Purpose
A component which allows a user to pick a single option from a short list of options.
Usage
To use the radio component, a developer needs to import both RadioGroup and Radio from @wedgekit/radio
import { Radio, RadioGroup } from '@wedgekit/radio';
const Example = () => {
const [value, setValue] = React.useState('');
return (
<RadioGroup
onChange={(v) => setValue(v)}
label="Go on, choose one!"
name="starter"
value={value}
>
<Radio value="charmander" label="Charmander" />
<Radio value="squirtle" label="Squirtle" />
<Radio value="bulbasaur" label="Bulbasaur" />
</RadioGroup>
);
};
render(<Example />);Props
Radio
label
Type: String
Required:
A string label to indicate what the radio input is for. Required on all Wedgekit inputs for A11y.
value
Type: string | number
Required:
The value of the radio when used in a group
checked
Type: boolean
Required:
Indicated whether or not the radio is checked
disabled
Type: boolean
Required:
id
Type: string | number
Required:
A unique identifier for the input to both associate the input with its label, as well as provide an identifier on the callback. If not provided, then one will be generated.
labelHidden
Type: boolean
Required:
Boolean for indicating if the label should be visible or not
name
Type: String
Required:
A name to associate that radio with a group
ref
Type: React.Ref
Required:
The ref giving a user access to the underlying HTML button.
status
Type: 'default' | 'error' | 'success' | 'pending'
Required:
Indicates form validation status for styling purposes
tabIndex
Type: number
Required:
Property used to disjoint tabbability
onBlur
Type: (e: React.SyntheticEvent) => void
Required:
Optional callback that is fired on a radio's selection
onChange
Type: (e: React.SyntheticEvent) => void
Required:
Optional callback that is fired on a radio's selection
onFocus
Type: (e: React.SyntheticEvent) => void
Required:
Optional callback that is fired on a radio's selection
RadioGroup
children
Type: React.ReactElement[]
Required:
label
Type: String
Required:
A string label for the radio group
name
Type: String
Required:
A string name for the entire group of radios that allows native radio group behavior
value
Type: string | number
Required:
Value of the selected radio
onChange
Type: (selectedValue: string | number) => void
Required:
className
Type: string
Required:
This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.
disabled
Type: boolean
Required:
Optional prop to disabled the entire group
info
Type: { title: string, content?: string, link? { url: string, label: string } }
Required:
Optional information to populate an info popup
labelHidden
Type: boolean
Required:
Boolean for indicating if the label should be visible or not
ref
Type: React.Ref
Required:
The ref giving a user access to the underlying HTML button.
required
Type: boolean
Required:
A boolean denoting whether a selection within the group is required
status
Type: 'default' | 'error' | 'success' | 'pending'
Required:
Indicates form validation status for styling purposes
tabIndex
Type: number
Required:
Property used to disjoint tabbability
onBlur
Type: (e: React.SyntheticEvent) => void
Required:
onFocus
Type: (e: React.SyntheticEvent) => void
Required: