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:

Option 1

Option 2

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:

Option 2

<!-- 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:

Option 3

<!-- 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:

Option 4

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:

Option 5

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:

Option 6

<!-- 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.

Last updated on 2024-08-24T05:42:44+00:00