Radio

Radio Component

The Radio component renders a styled radio input with an optional label, description, hint, validation messages, and tooltip. It supports multiple color themes and accessibility features, including unique IDs and required indication.

Example Usage

<x-radio tooltip="Select option" label="Option 1" description="Additional info" hint="Choose wisely" color="danger">
    test
</x-radio>

Props

• label (string|null)
  The main text label displayed next to the radio input.

• description (string|null)
  Optional descriptive text shown below the label to provide more context.

• hint (string|null)
  Helper text displayed below the radio input for guidance.

• uuid (string|null)
  Unique identifier used for the input's id attribute; autogenerated if not provided.

• color (string, default: 'primary')
  Sets the color theme of the radio button when checked. Options: primary, secondary, success, info, warning, danger.

• showRequired (bool, default: false)
  Whether to display an asterisk (*) next to the label if the input is required.

• showValidation (bool, default: false)
  Controls display of validation error messages below the input.

• tooltip (string|null)
  Tooltip text shown when hovering over the radio input or label.

Overview

This Radio component provides an accessible, customizable radio button input with support for labels, descriptions, hints, and validation feedback. The component integrates Tailwind CSS for styling with multiple color options and includes support for dark mode. Unique IDs and tooltips enhance usability and accessibility.