arkyn

v3.0.1-beta.72

Radio

The Radio component consists of two main elements: RadioGroup and RadioBox. The RadioGroup manages the state and context of radio buttons, while the RadioBox represents each individual option. It's ideal for exclusive selections where only one option can be chosen at a time.

tsx

import { RadioGroup, RadioBox } from "@arkyn/components";

Basic usage

Basic usage requires a RadioGroup containing the name property along with one or more RadioBox elements with unique values.

tsx

<RadioGroup name="basic-radio" label="Choose an option">
  <RadioBox value="option1">Option 1</RadioBox>
  <RadioBox value="option2">Option 2</RadioBox>
  <RadioBox value="option3">Option 3</RadioBox>
</RadioGroup>

Sizes

The available sizes are sm, md, and lg, applied through the RadioGroup and inherited by the RadioBox elements.

Group size

You can set the default size for all RadioBox elements within the RadioGroup using the size property.

tsx

<RadioGroup name="radio-sm" label="Small size" size="sm">
  <RadioBox value="small1">Small option 1</RadioBox>
  <RadioBox value="small2">Small option 2</RadioBox>
</RadioGroup>


<RadioGroup name="radio-md" label="Medium size" size="md">
  <RadioBox value="medium1">Medium option 1</RadioBox>
  <RadioBox value="medium2">Medium option 2</RadioBox>
</RadioGroup>


<RadioGroup name="radio-lg" label="Large size" size="lg">
  <RadioBox value="large1">Large option 1</RadioBox>
  <RadioBox value="large2">Large option 2</RadioBox>
</RadioGroup>

Individual sizes

It's possible to override the size of a specific RadioBox. (The size defined in the RadioGroup will continue to be the default for the others.)

tsx

<RadioGroup name="mixed-sizes" label="Priorities" size="md">
  <RadioBox value="low" size="sm">
    Low Priority
  </RadioBox>
  <RadioBox value="medium">Medium Priority</RadioBox>
  <RadioBox value="high" size="lg">
    High Priority
  </RadioBox>
</RadioGroup>

Radio states

The component supports being disabled at the group level or individually.

Disabling the entire group

Disabling the group prevents any user interaction with the radio buttons and prevents data from being submitted via form.

tsx

<RadioGroup name="disabled-group" label="Disabled options" disabled>
  <RadioBox value="option1">Option 1</RadioBox>
  <RadioBox value="option2">Option 2</RadioBox>
  <RadioBox value="option3">Option 3</RadioBox>
</RadioGroup>

Disabling a single radio box

Disabling a specific RadioBox prevents it from being selected, but the others remain interactive.

tsx

<RadioGroup name="disabled-options" label="Payment options">
  <RadioBox value="credit">Credit Card</RadioBox>
  <RadioBox value="pix" disabled>
    PIX (Under maintenance)
  </RadioBox>
</RadioGroup>

Validation and errors

The component integrates with form validation systems and can display error messages. If an error message is provided via the errorMessage property, it will take precedence over messages from the form provider.
Customizable Forms
For forms, it is recommended to use the FormProvider which offers native integration with all form tools.

tsx

<RadioGroup
  name="required-radio"
  label="Select your gender"
  showAsterisk
  errorMessage="Please select an option"
>
  <RadioBox value="male">
    <User size={16} style={{ marginRight: "8px" }} />
    Male
  </RadioBox>
  <RadioBox value="female">
    <User size={16} style={{ marginRight: "8px" }} />
    Female
  </RadioBox>
  <RadioBox value="other">
    <User size={16} style={{ marginRight: "8px" }} />
    Other
  </RadioBox>
</RadioGroup>

onChange callback

You can pass a function to the onChange property of the RadioGroup that will be called whenever the selected value changes. The function receives the new selected value as an argument

tsx

const [selectedValue, setSelectedValue] = useState("");


const handleRadioChange = (value: string) => {
  console.log("Selected value:", value);
  setSelectedValue(value);


  // Additional logic based on the value
  if (value === "premium") {
    // Enable premium features
  }
};


<RadioGroup
  name="subscription"
  label="Subscription plan"
  onChange={handleRadioChange}
  value={selectedValue}
>
  <RadioBox value="basic">Basic</RadioBox>
  <RadioBox value="premium">Premium</RadioBox>
  <RadioBox value="enterprise">Enterprise</RadioBox>
</RadioGroup>;

RadioGroup properties

name - string (required) Field name for form handling and radio button grouping
label - string Label text to be displayed above the radio group
showAsterisk - boolean Whether to show asterisk in the label for required fields
errorMessage - string Error message to be displayed below the group
value - string Controlled value for the selected option
defaultValue - string (default: "") Default selected value for uncontrolled usage
onChange - (value: string) => void Callback function called when selection changes
size - "sm" | "md" | "lg" (default: "md") Size variant for all radio buttons in the group
className - string Additional CSS classes for styling

RadioBox properties

value - string (required) Unique value for this radio option within the group
isError - boolean Error state indicator for styling
size - "sm" | "md" | "lg" Overrides the size inherited from RadioGroup
disabled - boolean Whether this specific option is disabled
children - ReactNode Content to be displayed next to the radio button
className - string Additional CSS classes for styling
Additional properties
The RadioGroup supports all HTML div properties (except onChange), and the RadioBox supports all HTML button properties.

Notes

  • The value property is required in each RadioBox and must be unique within the group
  • Only one option can be selected at a time within a group
On this page