Components

Radio Group

The radio group allows users to select one option from a set.
Source Styles source

Usage

The radio group component groups multiple radio buttons, displaying related choices in a consistent manner. 

<LumexRadioGroup TValue="string">
    <LumexRadio Value="@("leo")">Leonardo DiCaprio</LumexRadio>
    <LumexRadio Value="@("denzel")">Denzel Washington</LumexRadio>
    <LumexRadio Value="@("brad")">Brad Pitt</LumexRadio>
    <LumexRadio Value="@("joaquin")">Joaquin Phoenix</LumexRadio>
    <LumexRadio Value="@("christian")">Christian Bale</LumexRadio>
</LumexRadioGroup>

Disabled

You can disable a radio group to prevent user interaction. All radio buttons within the group are faded and do not respond to user clicks. 

<LumexRadioGroup TValue="string" Disabled="@true">
    <LumexRadio Value="@("leo")">Leonardo DiCaprio</LumexRadio>
    <LumexRadio Value="@("denzel")">Denzel Washington</LumexRadio>
    <LumexRadio Value="@("brad")">Brad Pitt</LumexRadio>
    <LumexRadio Value="@("joaquin")">Joaquin Phoenix</LumexRadio>
    <LumexRadio Value="@("christian")">Christian Bale</LumexRadio>
</LumexRadioGroup>

Read-Only

You can set a radio group to be read-only, allowing the user to view the selected options without being able to modify them. 

<LumexRadioGroup ReadOnly="@true" Value="@("leo")">
    <LumexRadio Value="@("leo")">Leonardo DiCaprio</LumexRadio>
    <LumexRadio Value="@("denzel")">Denzel Washington</LumexRadio>
    <LumexRadio Value="@("brad")">Brad Pitt</LumexRadio>
    <LumexRadio Value="@("joaquin")">Joaquin Phoenix</LumexRadio>
    <LumexRadio Value="@("christian")">Christian Bale</LumexRadio>
</LumexRadioGroup>

Orientation

You can control how the radio buttons are laid out within the radio group. You can choose to display the radio buttons vertically (default) or horizontally. 

<LumexRadioGroup TValue="string" Orientation="@Orientation.Horizontal">
    <LumexRadio Value="@("first")">First Class</LumexRadio>
    <LumexRadio Value="@("second")">Second Class</LumexRadio>
    <LumexRadio Value="@("third")">Third Class</LumexRadio>
    <LumexRadio Value="@("steerage")">Steerage</LumexRadio>
</LumexRadioGroup>

Sizes

The radio group component can control the size of the radio buttons within it to fit various layouts and design needs, from small radio groups to larger ones. 

<LumexRadioGroup TValue="string">
    <LumexRadio Size="@Size.Small" Value="@("sm")">Small</LumexRadio>
    <LumexRadio Size="@Size.Medium" Value="@("md")">Medium</LumexRadio>
    <LumexRadio Size="@Size.Large" Value="@("lg")">Large</LumexRadio>
</LumexRadioGroup>

Colors

Customize the appearance of the radio group by applying different colors that suit your application's theme and design. 

<LumexRadioGroup TValue="string">
    <LumexRadio Color="@ThemeColor.Default" Value="@("default")">Default</LumexRadio>
    <LumexRadio Color="@ThemeColor.Primary" Value="@("primary")">Primary</LumexRadio>
    <LumexRadio Color="@ThemeColor.Secondary" Value="@("secondary")">Secondary</LumexRadio>
    <LumexRadio Color="@ThemeColor.Success" Value="@("success")">Success</LumexRadio>
    <LumexRadio Color="@ThemeColor.Warning" Value="@("warning")">Warning</LumexRadio>
    <LumexRadio Color="@ThemeColor.Danger" Value="@("danger")">Danger</LumexRadio>
    <LumexRadio Color="@ThemeColor.Info" Value="@("info")">Info</LumexRadio>
</LumexRadioGroup>

Label

The radio group can include a label to provide context for the grouped radio buttons, making it clear what the set of options represents.

Choose the Oscar winner
<LumexRadioGroup TValue="string" Label="Choose the Oscar winner">
    <LumexRadio Value="@("leo")">Leonardo DiCaprio</LumexRadio>
    <LumexRadio Value="@("denzel")">Denzel Washington</LumexRadio>
    <LumexRadio Value="@("brad")">Brad Pitt</LumexRadio>
    <LumexRadio Value="@("joaquin")">Joaquin Phoenix</LumexRadio>
    <LumexRadio Value="@("christian")">Christian Bale</LumexRadio>
</LumexRadioGroup>

Description

Add a description to the radio group to give users additional information about the grouped options.

Choose the Oscar winner
You chose nobody to win the Oscar
<LumexRadioGroup Label="Choose the Oscar winner"
                 Description="@CalculatedDescription"
                 @bind-Value="@_selectedActor">
    <LumexRadio Value="@("Leonardo DiCaprio")">Leonardo DiCaprio</LumexRadio>
    <LumexRadio Value="@("Denzel Washington")">Denzel Washington</LumexRadio>
    <LumexRadio Value="@("Brad Pitt")">Brad Pitt</LumexRadio>
    <LumexRadio Value="@("Joaquin Phoenix")">Joaquin Phoenix</LumexRadio>
    <LumexRadio Value="@("Christian Bale")">Christian Bale</LumexRadio>
</LumexRadioGroup>

@code
{
    private string? _selectedActor;
    
    private string CalculatedDescription => $"You chose {_selectedActor ?? "nobody"} to win the Oscar";
}

Option Descriptions

You can also display a description for each radio group option, guiding users to make the best choice.

Choose Preferred Accommodations
<LumexRadioGroup TValue="string" Label="Choose Preferred Accommodations">
    <LumexRadio Description="The best of the best, the lap of luxury." Value="@("first")">
        First Class
    </LumexRadio>
    <LumexRadio Description="Almost First Class, but not quite." Value="@("second")">
        Second Class
    </LumexRadio>
    <LumexRadio Description="You'll feel lucky to have a bed." Value="@("third")">
        Third Class
    </LumexRadio>
    <LumexRadio Description="For the full stowaway experience." Value="@("steerage")">
        Steerage
    </LumexRadio>
</LumexRadioGroup>

Two-way Data Binding

The radio group component supports two-way data binding, allowing you to programmatically control toggled state. You can achieve this using the @bind-Value directive, or the Value and ValueChanged parameters.

Selected:

Selected: 

<div class="flex flex-col gap-2">
    <LumexRadioGroup @bind-Value="@_valueOne">
        <LumexRadio Value="@("leo")">Leonardo DiCaprio</LumexRadio>
        <LumexRadio Value="@("denzel")">Denzel Washington</LumexRadio>
        <LumexRadio Value="@("brad")">Brad Pitt</LumexRadio>
        <LumexRadio Value="@("joaquin")">Joaquin Phoenix</LumexRadio>
        <LumexRadio Value="@("christian")">Christian Bale</LumexRadio>
    </LumexRadioGroup>
    <p class="text-sm text-default-500">
        Selected: @_valueOne
    </p>
</div>

<div class="flex flex-col gap-2">
    <LumexRadioGroup TValue="string"
                     Value="@_valueTwo"
                     ValueChanged="@OnValueChanged">
        <LumexRadio Value="@("leo")">Leonardo DiCaprio</LumexRadio>
        <LumexRadio Value="@("denzel")">Denzel Washington</LumexRadio>
        <LumexRadio Value="@("brad")">Brad Pitt</LumexRadio>
        <LumexRadio Value="@("joaquin")">Joaquin Phoenix</LumexRadio>
        <LumexRadio Value="@("christian")">Christian Bale</LumexRadio>
    </LumexRadioGroup>
    <p class="text-sm text-default-500">
        Selected: @_valueTwo
    </p>
</div>

@code {
    private string? _valueOne;
    private string? _valueTwo;

    private void OnValueChanged(string value)
    {
        _valueTwo = value;
    }
}

Custom Styles

Radio Group

This component supports named slots that allow you to apply custom CSS to specific parts of the component.

  • Root: The overall container of the radio group.
  • Wrapper: The wrapper for the radio buttons within the group.
  • Label: The label associated with the radio group.
  • Description: The description of the radio group.

You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:

  • Class: The CSS class names to style the radio group wrapper.
  • Classes: The CSS class names to style the radio group slots.
  • RadioClasses: The CSS class names to style the radio group option slots.

Radio

This component supports named slots that allow you to apply custom CSS to specific parts of the component.

  • Root: The main wrapper around the radio option.
  • ControlWrapper: The wrapper around the visual control (the actual radio button).
  • Control: The radio button control (the visual circle).
  • LabelWrapper: The wrapper around the label and description.
  • Label: The label associated with the radio option.
  • Description: The description of the radio option.

You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:

  • Class: The CSS class names to style the radio button wrapper.
  • Classes: The CSS class names to style the radio button slots.
Choose your preferred meal
<LumexRadioGroup Label="Choose your preferred meal"
                 Classes="@_groupSlots"
                 RadioClasses="@_radioClasses" 
                 @bind-Value="@_chosenFood">
    <LumexRadio Value="@("Kebab")">
        <div class="flex items-center gap-4">
            <LumexIcon Icon="@Icons.Rounded.KebabDining"
                       Size="@new("32")" />
            <div>
                <div class="font-semibold">Chicken Kebab</div>
                <p class="text-sm text-primary">$11.99</p>
            </div>
        </div>
    </LumexRadio>

    <LumexRadio Value="@("Ramen")">
        <div class="flex items-center gap-4">
            <LumexIcon Icon="@Icons.Rounded.RamenDining"
                       Size="@new("32")" />
            <div>
                <div class="font-semibold">Ramen Bowl</div>
                <p class="text-sm text-primary">$12.99</p>
            </div>
        </div>
    </LumexRadio>

    <LumexRadio Value="@("Pizza")">
        <div class="flex items-center gap-4">
            <LumexIcon Icon="@Icons.Rounded.LocalPizza"
                       Size="@new("32")" />
            <div>
                <div class="font-semibold">Pizza</div>
                <p class="text-sm text-primary">$5.99</p>
            </div>
        </div>
    </LumexRadio>

    <LumexRadio Value="@("Nothing")">
        <div class="flex items-center gap-4">
            <LumexIcon Icon="@Icons.Rounded.NoFood"
                       Size="@new("32")" />
            <div>
                <div class="font-semibold">No Food</div>
                <p class="text-sm text-primary">No Cost</p>
            </div>
        </div>
    </LumexRadio>
</LumexRadioGroup>

@code
{
    private string? _chosenFood;

    private RadioGroupSlots _groupSlots = new()
    {
        Label = "text-neutral-700 font-medium"
    };

    private RadioSlots _radioClasses = new()
    {
        Root = ElementClass.Empty()
            .Add("inline-flex m-0 bg-surface1 hover:bg-surface2 items-center justify-between")
            .Add("flex-row-reverse max-w-[300px] rounded-lg gap-4 p-4 border-2 border-default-200")
            .Add("data-[selected=true]:border-primary")
            .Add("data-[selected=true]:bg-primary-100/25")
            .Add("transition-colors")
            .ToString()
    };
}

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

An unhandled error has occurred. Reload 🗙