Radio

Implementation

import { Radio } from "slipstream-ui";

const Example = () => <Radio >Radio Label<Radio>;

Default

Example

Radio Label

<FormGroup>

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

</FormGroup>

Color

Example

Default

Primary

Success

Warning

Danger

<Radio color="default">...</Radio>

<Radio color="primary">...</Radio>

<Radio color="success">...</Radio>

<Radio color="warning">...</Radio>

<Radio color="danger">...</Radio>

Validation

Example

Invalid

Disabled

<Radio invalid>...</Radio>

<Radio disabled>...</Radio>

Required

Example

Radio Label*

<Radio required>...</Radio>

Size

Example

Medium (Default) - size="md"

Large - size="lg"

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

Right-To-Left (rtl)

Example

Radio Label

<Radio rtl>...</Radio>

Props

Attribute	Type	Value	Default Value	Description
id	string			Matches the label in connection with the radio (htmlFor/id)
size	string	md/lg	md	UI size of Radio and Label
color	string	danger/default/primary success/warning/invalid	primary	Color of Radio when checked
invalid	boolean	true/false		Red text for Radio's label
disabled	boolean	true/false		Disabled the element from user interaction
required	boolean	true/false		Set the Radio as required and update Label UI to required
rtl	boolean	true/false		When true, sets element to direction of right-to-left (rtl)
labelProps	LabelProps			Pass in props you find useful for the Label component