Usage
LabelPosition
Size
xs
sm
md
lg
xl
Color
Shades
Controlled
Disabled state
Radio.Group component
Select your favorite framework/library
This is anonymous
Controlled Radio.Group
Get input ref
Radio component props
Name | Type | Description |
---|---|---|
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
Name | Type | Description |
---|---|---|
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
Name | Static selector | Description |
---|---|---|
root | .asuikit-Radio-root | root radio element |
body | .asuikit-Radio-body | Wrapper for label and radio button |
labelWrapper | .asuikit-Radio-labelWrapper | Include label and description component |
radio | .asuikit-Radio-radio | Radio button |
inner | .asuikit-Radio-inner | Radio button inner, contains input and icon |
icon | .asuikit-Radio-icon | Radio button icon |
error | .asuikit-Radio-error | Error message |
description | .asuikit-Radio-description | Description |
label | .asuikit-Radio-label | Label |