Skip to main content

Radio

Implementation#

import { Radio } from "slipstream-ui";
const Example = () => <Radio >Radio Label<Radio>;

Default#

Example
<FormGroup>
<Radio id="RadioID">Radio Label</Radio>
</FormGroup>

Color#

Example
<Radio color="default">...</Radio>
<Radio color="primary">...</Radio>
<Radio color="success">...</Radio>
<Radio color="warning">...</Radio>
<Radio color="danger">...</Radio>

Validation#

Example
<Radio invalid>...</Radio>
<Radio disabled>...</Radio>

Required#

Example
<Radio required>...</Radio>

Size#

Example
<Radio size="lg">...</Radio>

Right-To-Left (rtl)#

Example
<Radio rtl>...</Radio>

Props#

AttributeTypeValueDefault ValueDescription
idstringMatches the label in connection with the radio (htmlFor/id)
sizestringmd/lgmdUI size of Radio and Label
colorstringdanger/default/primary
success/warning/invalid
primaryColor of Radio when checked
invalidbooleantrue/falseRed text for Radio's label
disabledbooleantrue/falseDisabled the element from user interaction
requiredbooleantrue/falseSet the Radio as required and update Label UI to required
rtlbooleantrue/falseWhen true, sets element to direction of right-to-left (rtl)
labelPropsLabelPropsPass in props you find useful for the Label component