Radio

Examples

Uncontrolled

Uncontrolled with inital value set. Radio buttons present a group of options, of which only a single option can be selected at a time. The grouping is commonly defined by the name prop.

import React from 'react'
import Radio from '@pluralsight/ps-design-system-radio'
const Comp = () => (
<Radio.Group name="courseLevel">
<Radio.Button value="beginner" label="Beginner" />
<Radio.Button value="intermediate" label="Intermediate" />
<Radio.Button value="advanced" label="Advanced" />
</Radio.Group>
)
export default Comp

Controlled

Controlled Radios require both value and handleChange callback

Selected: intermediate
import React from 'react'
import Radio from '@pluralsight/ps-design-system-radio'
import Button from '@pluralsight/ps-design-system-button'
import { layout, type, colorsTextIcon, colorsBackgroundLight } from '@pluralsight/ps-design-system-core'
const Comp = () => {
const [value, setValue] = React.useState('intermediate')
function handleChange(evt, nextValue) {
setValue(nextValue)
}
return (
<div className="example-grid--col-2">
<Radio.Group onChange={handleChange} value={value} name="controlled">
<Radio.Button value="beginner" label="Beginner" />
<Radio.Button value="intermediate" label="Intermediate" />
<Radio.Button value="advanced" label="Advanced" />
</Radio.Group>
<div
className="example-flex-column"
style={{
padding: layout.spacingLarge,
fontSize: type.fontSizeMedium,
color: colorsTextIcon.lowOnLight,
background: colorsBackgroundLight[2],
borderRadius: 12
}}
>
Selected: {value}
<Button
onClick={() => setValue('intermediate')}
appearance={Button.appearances.secondary}
>
Set Intermediate
</Button>
</div>
</div>
)
}
export default Comp

Disabled

Disabled radio buttons are unmodifiable and diminished visually.

import React from 'react'
import Radio from '@pluralsight/ps-design-system-radio'
const Comp = () => (
<Radio.Group disabled name="courseLevel">
<Radio.Button value="beginner" label="Beginner" />
<Radio.Button value="intermediate" label="Intermediate" />
<Radio.Button value="advanced" label="Advanced" />
</Radio.Group>
)
export default Comp

Error

Error states are engaged with the error flag.

import React from 'react'
import Radio from '@pluralsight/ps-design-system-radio'
const Comp = () => (
<Radio.Group error name="courseLevel">
<Radio.Button value="beginner" label="Beginner" />
<Radio.Button value="intermediate" label="Intermediate" />
<Radio.Button value="advanced" label="Advanced" />
</Radio.Group>
)
export default Comp

Usage & Types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-radio
  • Import
    import Radio from '@pluralsight/ps-design-system-radio'

Radio.Group

Name
Type
Description
Default
disablebooleanstandard input disable flagfalse
errorbooleanerror state flagfalse
labelstringidentifying string for group
namestringform data identifier
onChange(Event, value: any) => voidtriggers on radio select
subLabelstringsupporting text or error messaging
valuestring | numberif Radio.Group is controlled current selected radio value else if uncontrolled initial selected value

Radio.Button

Name
Type
Description
Default
labelReact.ReactNodedisplay text
onBlur(Event) => voidtriggers on radio blur
onClick(Event, value: any) => voidtriggers on radio select
onFocus(Event) => voidtriggers on radio focus
valuestring | numberradio option value