v6.0.35

Radio

Wrapper for input type radio
Import

Usage

LabelPosition
Size
xs
sm
md
lg
xl
Color
Shades
import { Radio } from '@asuikit/core';
function Demo() {
return (
<Radio
label="I cannot be unchecked"
/>
);
}

Controlled

import { useState } from 'react';
import { Radio } from '@asuikit/core';
function Demo() {
const [checked, setChecked] = useState(false);
return <Radio checked={checked} onChange={(event) => setChecked(event.currentTarget.checked)} />;
}

Disabled state

import { Radio } from '@asuikit/core';
function Demo() {
return (
<>
<Radio checked disabled label="React" value="react" />
<Radio disabled label="Angular" value="nu" />
<Radio disabled label="Svelte" value="sv" />
</>
);
}

Radio.Group component

Select your favorite framework/library
This is anonymous
import { Radio } from '@asuikit/core';
function Demo() {
return (
<Radio.Group
name="favoriteFramework"
label="Select your favorite framework/library"
description="This is anonymous"
withAsterisk
>
<Group mt="xs">
<Radio value="react" label="React" />
<Radio value="svelte" label="Svelte" />
<Radio value="ng" label="Angular" />
<Radio value="vue" label="Vue" />
</Group>
</Radio.Group>
);
}

Controlled Radio.Group

import { useState } from 'react';
import { Radio } from '@asuikit/core';
function Demo() {
const [value, setValue] = useState('react');
return (
<Radio.Group
value={value}
onChange={setValue}
name="favoriteFramework"
label="Select your favorite framework/library"
description="This is anonymous"
withAsterisk
>
<Radio value="react" label="React" />
<Radio value="svelte" label="Svelte" />
<Radio value="ng" label="Angular" />
<Radio value="vue" label="Vue" />
</Radio.Group>
);
}

Get input ref

import { useRef } from 'react';
import { Radio } from '@asuikit/core';
function Demo() {
const ref = useRef<HTMLInputElement>(null);
return <Radio value="react" label="React" ref={ref} />;
}

Radio component props

NameTypeDescription
color
MantineColor
Active radio color from theme.colors
description
ReactNode
description, displayed after label
error
ReactNode
Displays error message after input
icon
FC<Omit<SVGProps<SVGSVGElement>, "ref">>
Replace default icon
label
ReactNode
Radio label
labelPosition
"left" | "right"
Position of label
size
"xs" | "sm" | "md" | "lg" | "xl"
Predefined label fontSize, radio width, height and border-radius
transitionDuration
number
Animation duration in ms
wrapperProps
Record<string, any>
Props spread to root element

Radio.Group component props

NameTypeDescription
children *
ReactNode
<Radio /> components
defaultValue
string
Initial value for uncontrolled component
description
ReactNode
Input description, displayed after label
descriptionProps
Record<string, any>
Props spread to description element
error
ReactNode
Displays error message after input
errorProps
Record<string, any>
Props spread to error element
inputContainer
(children: ReactNode) => ReactNode
Input container component, defaults to React.Fragment
inputWrapperOrder
("input" | "label" | "error" | "description")[]
Controls order of the Input.Wrapper elements
label
ReactNode
Input label, displayed before input
labelProps
Record<string, any>
Props spread to label element
name
string
Name attribute of radio inputs
onChange
(value: string) => void
Called when value changes
required
boolean
Adds required attribute to the input and red asterisk on the right side of label
size
"xs" | "sm" | "md" | "lg" | "xl"
Predefined label fontSize, radio width, height and border-radius
value
string
Value of currently selected radio
withAsterisk
boolean
Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input
wrapperProps
Record<string, any>
Props spread to root element

Radio component Styles API

NameStatic selectorDescription
root.asuikit-Radio-rootroot radio element
body.asuikit-Radio-bodyWrapper for label and radio button
labelWrapper.asuikit-Radio-labelWrapperInclude label and description component
radio.asuikit-Radio-radioRadio button
inner.asuikit-Radio-innerRadio button inner, contains input and icon
icon.asuikit-Radio-iconRadio button icon
error.asuikit-Radio-errorError message
description.asuikit-Radio-descriptionDescription
label.asuikit-Radio-labelLabel