Skip to main content
⌘K
Last modified: 24/Jun/2024

Radio

Use the radio when you want to offer multiple options for the user to choose from, but they may choose only one.

Check out the Figma documentation here.

#Usage

import { Radio } from '@kinsta/stratus'

const MyComponent = () => (
  <>
    <Radio name="team" label="Galactic empire" />
    <Radio name="team" label="Rebel alliance" />
  </>
)

#With condition slot

import { Radio, Input } from '@kinsta/stratus'

const MyComponent = () => (
  <>
    <Radio
      name="team"
      label="Galactic empire"
      conditionalSlot={
        <Input label="Why do you want to join to the Empire?">
        }
    />
  </>
)

#Props

The Radio components interface extends the HTMLInputElement interface. So you can use any props which documented there. Also, you can utilize all the React Synthetic events (on*), and props related to styling (className, style).

#isChecked
boolean
Decides whether it is checked or not.
false
#isDisabled
boolean
Decides whether it is disabled.
false
#isIndeterminate
boolean
#isInFocus
boolean
Decides whether it has focus on it.
#value
string
The identifier of the element
#onChange
(event: ChangeEvent<HTMLInputElement>) => void
Handler that is called when the checkbox changes.
#id
string
#conditionalSlot
ReactElement<any, string | JSXElementConstructor<any>>
It renders elements conditionally from the isSelected prop.
#description
string | ReactElement<any, string | JSXElementConstructor<any>>
It adds a description text under the label. This is not required, because you might use the element without it.
#errorMessage
string | ReactElement<any, string | JSXElementConstructor<any>>
Renders and error text below the label.
#label
ReactNode
Label of the element. This is not required, because you might use the element standalone. If so, you should care about the proper accessibility of the element.
#hasAutoFocus
boolean
Decides whether it has automatically focus on it.
false
#isInGroup
boolean
Removes the element from the tab flow. The tab navigation is disabled between the group items, but the arrow navigation is available instead. It's always set to true in the Group component.
false

#Types

  • RadioProps: props of the Radio component processed by stratus (including value and onChange)
  • RadioInterface: RadioProps extended by Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>, 'onChange'>

Read more about types here

#See also