XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Radio

Previous: ProgressNext: Resizable

A set of options where only one can be selected.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import { Radio, RadioItem } from "xiod-ui/radio";

Anatomy

1<Radio>2  <RadioItem />3</Radio>

API Reference

Detailed documentation of properties and options.

Radio

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
defaultValue
any
–

The uncontrolled value of the radio button that should be initially selected.

To render a controlled radio group, use the value prop instead.

disabled
boolean
false

Whether the component should ignore user interaction.

form

RadioItem

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
valueReq
any
–

The unique identifying value of the radio in a group.

disabled
boolean
ProgressResizable
string
–

Identifies the form that owns the radio inputs. Useful when the radio group is rendered outside the form.

inputRef
Ref<HTMLInputElement>
–

A ref to access the hidden input element.

name
string
–

Identifies the field when a form is submitted.

onValueChange
((value: Value, eventDetails: RadioGroup.ChangeEventDetails) => void)
–

Callback fired when the value changes.

readOnly
boolean
false

Whether the user should be unable to select a different radio button in the group.

required
boolean
false

Whether the user must choose a value before submitting a form.

value
any
–

The controlled value of the radio item that should be currently selected.

To render an uncontrolled radio group, use the defaultValue prop instead.

–

Whether the component should ignore user interaction.

inputRef
Ref<HTMLInputElement>
–

A ref to access the hidden input element.

nativeButton
boolean
false

Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.

readOnly
boolean
–

Whether the user should be unable to select the radio button.

required
boolean
–

Whether the user must choose a value before submitting a form.

variant
"default"|"diamond"|"expressive"|"sharp"
default

The visual style of the component.