Radio
The Radio
component in Electrik Slate UI is a form element used to select a single option from a list of choices. It supports customization through props, integrates seamlessly with dark mode, and includes validation error messages.
Props
Prop Name | Type | Default | Description |
---|---|---|---|
name |
String | null |
The name of the radio input (required for form submissions). |
value |
String | null |
The value of the radio input (required). |
checked |
Boolean | false |
Whether the radio input is checked by default. |
disabled |
Boolean | false |
Whether the radio input is disabled. |
label |
String | null |
The label text associated with the radio input. |
helpText |
String | null |
Additional help text displayed below the label. |
error |
String | null |
Error message to be displayed below the radio input. |
Examples
Basic Radio Usage
This example demonstrates a basic radio input with a label:
Select option 2 for 2nd action
<!-- Basic Radio Input -->
<x-slate::radio name="example[]" value="option1" label="Option 1" />
<x-slate::radio name="example[]" value="option2" label="Option 2" help-text="Select option 2 for 2nd action" />
Checked Radio
This example demonstrates a radio input that is checked by default:
<!-- Checked Radio Input -->
<x-slate::radio name="example" value="option2" label="Option 2" checked />
Disabled Radio
This example demonstrates a radio input that is disabled:
<!-- Disabled Radio Input -->
<x-slate::radio name="example" value="option3" label="Option 3" disabled />
Radio with Error Message
This example demonstrates how to display an error message below the radio input:
You must select an option.
<!-- Radio Input with Error Message -->
<x-slate::radio
name="example"
value="option4"
label="Option 4"
error="You must select an option."
/>
Radio with Help Text
This example demonstrates how to display additional help text below the label:
This is additional information about the option.
<!-- Radio Input with Help Text -->
<x-slate::radio
name="example"
value="option5"
label="Option 5"
helpText="This is additional information about the option."
/>
Radio in Dark Mode
This example demonstrates how the radio input adapts to dark mode:
<!-- Radio Input in Dark Mode -->
<div class="dark">
<x-slate::radio name="example" value="option6" label="Option 6" />
</div>
Customization
The Radio
component is flexible and easy to customize. It supports various states such as checked, disabled, and error. The Radio
component's dark mode support ensures that it maintains readability across different themes.
Stay in Touch
Be the first to know about the latest releases and features.