Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Default

Comfortable

Compact

Usage

Import the component. It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
const { RadioGroup, RadioGroupItem } = VM.require(
  "uiisnear.near/widget/radioGroup"
);
 
if (Tailwind == undefined) return "";

<Tailwind>
  <RadioGroup defaultValue="option-one">
    <div className="flex items-center space-x-2">
      <RadioGroupItem value="option-one" id="option-one" />
      <Label htmlFor="option-one">Option One</Label>
    </div>
    <div className="flex items-center space-x-2">
      <RadioGroupItem value="option-two" id="option-two" />
      <Label htmlFor="option-two">Option Two</Label>
    </div>
  </RadioGroup>
</Tailwind>

API Reference

RadioGroup

Contains all of the progress parts.

Prop	Type	Default
defaultValue	string	---
value	string	---
onValueChange	function	---
disabled	boolean	---
name	string	---
required	boolean	---
orientation	enum	undefined
dir	enum	---
loop	boolean	true

Data attribute	Values
[data-disabled]	Present when disabled

RadioGroupItem

Contains all of the progress parts.

Prop	Type	Default
value	string	---
disabled	boolean	---
required	boolean	---

Data attribute	Values
[data-state]	"checked" \| "unchecked"
[data-disabled]	Present when disabled

Classnames

Classnames available to customize the component.

Function	Classname
RadioGroup	radioGroupClassname
RadioGroupItem	radioGroupItemClassname

Progress Scroll Area