Looking for the old docs? Go here

Menus

Radio Group

This component is used to display a set of options where only one can be checked.

API Reference

Section titled API Reference

Root

Section titled Root
HTMLAttributes
Ref<RadioGroupInstance>

A radio group consists of options where only one of them can be checked. Each option is provided as a radio (i.e., a selectable element).

import { RadioGroup } from "@vidstack/react";

const Component = RadioGroup.Root;
type Props = RadioGroup.RootProps;
<RadioGroup.Root>
  <RadioGroup.Item value="1080">1080p</RadioGroup.Item>
  <RadioGroup.Item value="720">720p</RadioGroup.Item>
</RadioGroup.Root>

Props

Section titled Props
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
value
string
''

Callbacks

Section titled Callbacks
CallbackType
onChange
function

Instance

Section titled Instance
import { RadioGroup, type RadioGroupInstance } from "@vidstack/react"

const ref = useRef<RadioGroupInstance>(null);

useEffect(() => { /* Use props/methods here. */ }, [])

<RadioGroup.Root ref={ref}>
PropType
values
string[]

Item

Section titled Item
HTMLAttributes
Ref<HTMLElement>

A radio represents a option that a user can select inside of a radio group. Only one radio can be checked in a group.

import { RadioGroup } from "@vidstack/react";

const Component = RadioGroup.Item;
type Props = RadioGroup.ItemProps;
<RadioGroup.Item value="1080">1080p</RadioGroup.Item>

Props

Section titled Props
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
value
string
''

Callbacks

Section titled Callbacks
CallbackType
onChange
function
onSelect
function

Data Attributes

Section titled Data Attributes
/* Example. */
.component[data-foo] {}
NameDescription
data-checked
Whether radio is checked.
data-focus
Whether radio is being keyboard focused.
data-hocus
Whether radio is being keyboard focused or hovered over.
Previous
Menu