Component reference
Radio
Choose one framework in a named radio group.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Selected value: react
Width adapts to the available space
"use client";
import { useState } from "react";
import { RadioGroup, Radio } from "@pimolu/react";
const frameworks = [
{
value: "react",
label: "React",
description: "Library for building interfaces.",
},
{
value: "nextjs",
label: "Next.js",
description: "Full-stack React framework.",
},
{
value: "angular",
label: "Angular",
description: "Complete web framework.",
},
];
function FrameworkExample() {
const [framework, setFramework] = useState("react");
return (
<div className="grid gap-5 min-w-0">
<RadioGroup
label="Framework"
name="framework"
value={framework}
onValueChange={setFramework}
description="Choose the stack for this project."
>
{
frameworks.map((option) => (<Radio
key={option.value}
value={option.value}
label={option.label}
description={option.description}
/>))
}
</RadioGroup>
<p className="text-sm text-muted leading-relaxed">
Selected value: <strong>{framework}</strong>
</p>
</div>
);
}
export function DemoExample() {
return (<FrameworkExample />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Sizes
sm, md and lg.
Variants
The color of the selected circle.
Orientation
Vertical by default, horizontal on demand.
Usage
Use one shared group name for mutually exclusive choices and meaningful submitted values.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluRadioProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
valueRequired | string | — | Unique value for this option. |
size | "sm" | "md" | "lg" | undefined | "md" | Component size. |
variant | "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefined | "primary" | Variant exposed by this component. |
label | string | undefined | — | Visible label associated with the control. |
description | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
onChange | ChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onClick | MouseEventHandler<HTMLInputElement> | undefined | — | Standard React/HTML attribute. |
disabled | boolean | undefined | false | Standard React/HTML attribute. |
name | string | undefined | — | Standard React/HTML attribute. |
required | boolean | undefined | false | Standard React/HTML attribute. |
valueRequiredstringNo default extracted.
Unique value for this option.
size"sm" | "md" | "lg" | undefinedDefault: "md"
Component size.
variant"primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefinedDefault: "primary"
Variant exposed by this component.
labelstring | undefinedNo default extracted.
Visible label associated with the control.
descriptionstring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
onChangeChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onClickMouseEventHandler<HTMLInputElement> | undefinedNo default extracted.
Standard React/HTML attribute.
disabledboolean | undefinedDefault: false
Standard React/HTML attribute.
namestring | undefinedNo default extracted.
Standard React/HTML attribute.
requiredboolean | undefinedDefault: false
Standard React/HTML attribute.
PimoluRadioGroupProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
name | string | undefined | — | Native form field name (automatically generated if omitted). |
value | string | undefined | — | Controlled selection. |
defaultValue | string | undefined | — | Initial uncontrolled selection. |
onValueChange | ((value: string) => void) | undefined | — | Called when an option is selected. |
size | "sm" | "md" | "lg" | undefined | "md" | Component size. |
variant | "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefined | "primary" | Variant exposed by this component. |
orientation | "horizontal" | "vertical" | undefined | "vertical" | Public Pimolu prop; see the source declaration for details. |
required | boolean | undefined | false | Marks every option as required. A native fieldset has no `required` attribute, so it is declared here and forwarded to each radio. |
label | string | undefined | — | Rendered inside a native legend. |
description | string | undefined | — | Group-level accessible description. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLFieldSetElement> | undefined | — | Standard React/HTML attribute. |
disabled | boolean | undefined | false | Standard React/HTML attribute. |
namestring | undefinedNo default extracted.
Native form field name (automatically generated if omitted).
valuestring | undefinedNo default extracted.
Controlled selection.
defaultValuestring | undefinedNo default extracted.
Initial uncontrolled selection.
onValueChange((value: string) => void) | undefinedNo default extracted.
Called when an option is selected.
size"sm" | "md" | "lg" | undefinedDefault: "md"
Component size.
variant"primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefinedDefault: "primary"
Variant exposed by this component.
orientation"horizontal" | "vertical" | undefinedDefault: "vertical"
Public Pimolu prop; see the source declaration for details.
requiredboolean | undefinedDefault: false
Marks every option as required. A native fieldset has no `required` attribute, so it is declared here and forwarded to each radio.
labelstring | undefinedNo default extracted.
Rendered inside a native legend.
descriptionstring | undefinedNo default extracted.
Group-level accessible description.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLFieldSetElement> | undefinedNo default extracted.
Standard React/HTML attribute.
disabledboolean | undefinedDefault: false
Standard React/HTML attribute.
Accessibility
- Give the group context and each radio a label; verify arrow and Tab behavior.