Radio

Radios are used when only one choice may be selected in a series of options.

Import

import { Radio } from "@deca-ui/react"

Usage

Radio

<Radio initialSelect label="Radio" />

Disabled

Use the disabled prop to disable the Radio.

Radio

<Radio disabled label="Radio" />
<Radio initialSelect disabled label="Radio" />

Sizes

Use the size prop to change the size of the Radio. You can set the value to sm, md, or lg.

Small

Medium

Large

<Radio size="sm">Small</Radio>
<Radio size="md">Medium</Radio>
<Radio size="lg">Large</Radio>

Colors

Use the color prop to change the color of the Radio. You can set the value to primary, secondary, success, warning or error.

<Radio initialSelect color="primary" label="Primary" />
<Radio initialSelect color="secondary" label="Secondary" />
<Radio initialSelect color="warning" label="Warning" />
<Radio initialSelect color="success" label="Success" />
<Radio initialSelect color="error" label="Error" />

Radio Group

Harry Potter

The Great Gatsby

The Hobbits

<Radio.Group
  defaultValue={["A", "C"]}
  css={{ flexDirection: "row", gap: "$3", flexWrap: "wrap" }}
>
  <Radio value="A" label="Harry Potter" />
  <Radio value="B" label="The Great Gatsby" />
  <Radio initialSelect value="C" label="The Hobbits" />
</Radio.Group>

Made by Heril Saha

Contents