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
disable
boolean
standard input disable flag
false
error
boolean
error state flag
false
label
string
identifying string for group
name
string
form data identifier
onChange
(Event, value: any) => void
triggers on radio select
subLabel
string
supporting text or error messaging
value
string | number
if Radio.Group is controlled current selected radio value else if uncontrolled initial selected value

Radio.Button

Name
Type
Description
Default
label
React.ReactNode
display text
onBlur
(Event) => void
triggers on radio blur
onClick
(Event, value: any) => void
triggers on radio select
onFocus
(Event) => void
triggers on radio focus
value
string | number
radio option value