Radio Button

Radio buttons allow users to select one option from a set. Use radio buttons when you want users to see all available options and only one option in a group can be selected at a time. 

<div style="display: flex; flex-direction: column; gap: 0.5rem;">
    <x-mbc::radio id="radio-default-1" name="default-group" value="option1" label="Option 1" checked />
    <x-mbc::radio id="radio-default-2" name="default-group" value="option2" label="Option 2" />
    <x-mbc::radio id="radio-default-3" name="default-group" value="option3" label="Option 3" />
</div>

Basic Radio Buttons link

Radio buttons are used when you have a list of options and the user should select exactly one. All radio buttons with the same name attribute form a group where only one can be selected. 

<div style="display: flex; gap: 2rem;">
    <x-mbc::radio id="radio-basic-1" name="basic-group" value="1" checked />
    <x-mbc::radio id="radio-basic-2" name="basic-group" value="2" />
    <x-mbc::radio id="radio-basic-3" name="basic-group" value="3" />
    <x-mbc::radio id="radio-basic-4" name="basic-group" value="4" />
</div>

Important: The name attribute groups radio buttons together. Only one radio in a group can be selected at a time. The id must be unique for each radio button.

Radio with Labels link

Add descriptive labels using the label prop. Labels make radio buttons more accessible and user-friendly by providing clear context about each option. 

<div style="display: flex; flex-direction: column; gap: 0.5rem;">
    <x-mbc::radio 
        id="radio-label-1" 
        name="subscription" 
        value="free" 
        label="Free - Basic features" 
        checked 
    />
    <x-mbc::radio 
        id="radio-label-2" 
        name="subscription" 
        value="pro" 
        label="Pro - $9.99/month" 
    />
    <x-mbc::radio 
        id="radio-label-3" 
        name="subscription" 
        value="enterprise" 
        label="Enterprise - Custom pricing" 
    />
</div>

Tip: Labels are automatically associated with their radio buttons using the id attribute, making them clickable to toggle the radio state.

Radio Groups link

Create different radio groups by using different name attributes. Each group operates independently, allowing one selection per group.

Delivery Method
Payment Method 
<div style="display: flex; gap: 3rem; flex-wrap: wrap;">
    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>Delivery Method</x-mbc::typography>
        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
            <x-mbc::radio 
                id="delivery-standard" 
                name="delivery" 
                value="standard" 
                label="Standard (5-7 days)" 
                checked 
            />
            <x-mbc::radio 
                id="delivery-express" 
                name="delivery" 
                value="express" 
                label="Express (2-3 days)" 
            />
            <x-mbc::radio 
                id="delivery-overnight" 
                name="delivery" 
                value="overnight" 
                label="Overnight" 
            />
        </div>
    </div>

    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>Payment Method</x-mbc::typography>
        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
            <x-mbc::radio 
                id="payment-credit" 
                name="payment" 
                value="credit" 
                label="Credit Card" 
                checked 
            />
            <x-mbc::radio 
                id="payment-paypal" 
                name="payment" 
                value="paypal" 
                label="PayPal" 
            />
            <x-mbc::radio 
                id="payment-bank" 
                name="payment" 
                value="bank" 
                label="Bank Transfer" 
            />
        </div>
    </div>
</div>

Note: Each group has its own independent selection. Radios with name="delivery" are separate from those with name="payment".

Radio Colors link

Customize radio button colors using the color prop. You can use theme colors or any custom color value.

Theme Colors
Custom Colors 
<div style="display: flex; flex-direction: column; gap: 1.5rem;">
    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>Theme Colors</x-mbc::typography>
        <div style="display: flex; gap: 2rem; flex-wrap: wrap;">
            <x-mbc::radio 
                id="color-primary" 
                name="theme-colors" 
                value="primary" 
                label="Primary" 
                color="primary"
                checked 
            />
            <x-mbc::radio 
                id="color-secondary" 
                name="theme-colors" 
                value="secondary" 
                label="Secondary (Default)" 
                color="secondary"
            />
        </div>
    </div>

    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>Custom Colors</x-mbc::typography>
        <div style="display: flex; gap: 2rem; flex-wrap: wrap;">
            <x-mbc::radio 
                id="color-success" 
                name="custom-colors" 
                value="success" 
                label="Success Green" 
                color="#4CAF50"
                checked 
            />
            <x-mbc::radio 
                id="color-warning" 
                name="custom-colors" 
                value="warning" 
                label="Warning Orange" 
                color="#FF9800"
            />
            <x-mbc::radio 
                id="color-error" 
                name="custom-colors" 
                value="error" 
                label="Error Red" 
                color="#F44336"
            />
            <x-mbc::radio 
                id="color-info" 
                name="custom-colors" 
                value="info" 
                label="Info Blue" 
                color="#2196F3"
            />
        </div>
    </div>
</div>

Tip: Use colors purposefully to convey meaning or match your brand. The default color is secondary, which follows Material Design guidelines.

Disabled State link

Disable radio buttons using the disabled attribute. Disabled radios cannot be interacted with and have reduced opacity.

Mixed States
Unavailable Options 
<div style="display: flex; flex-direction: column; gap: 1.5rem;">
    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>Mixed States</x-mbc::typography>
        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
            <x-mbc::radio 
                id="disabled-1" 
                name="disabled-group" 
                value="enabled-selected" 
                label="Enabled & Selected" 
                checked 
            />
            <x-mbc::radio 
                id="disabled-2" 
                name="disabled-group" 
                value="enabled-unselected" 
                label="Enabled & Unselected" 
            />
            <x-mbc::radio 
                id="disabled-3" 
                name="disabled-group" 
                value="disabled-unselected" 
                label="Disabled & Unselected" 
                disabled 
            />
            <x-mbc::radio 
                id="disabled-4" 
                name="disabled-separate" 
                value="disabled-selected" 
                label="Disabled & Selected" 
                disabled 
                checked 
            />
        </div>
    </div>

    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>Unavailable Options</x-mbc::typography>
        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
            <x-mbc::radio 
                id="product-basic" 
                name="product" 
                value="basic" 
                label="Basic Plan - Available" 
                checked 
            />
            <x-mbc::radio 
                id="product-pro" 
                name="product" 
                value="pro" 
                label="Pro Plan - Available" 
            />
            <x-mbc::radio 
                id="product-premium" 
                name="product" 
                value="premium" 
                label="Premium Plan - Sold Out" 
                disabled 
            />
            <x-mbc::radio 
                id="product-enterprise" 
                name="product" 
                value="enterprise" 
                label="Enterprise Plan - Coming Soon" 
                disabled 
            />
        </div>
    </div>
</div>

Use Case: Disable options that are unavailable, out of stock, or not applicable based on previous selections.

Touch Target link

For better mobile accessibility, enable the touch target wrapper using :touch="true". This creates a 48x48 pixel touch area, making it easier to tap on mobile devices.

Standard (No Touch Target)
With Touch Target 
<div style="display: flex; gap: 3rem; flex-wrap: wrap;">
    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>Standard (No Touch Target)</x-mbc::typography>
        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
            <x-mbc::radio 
                id="touch-standard-1" 
                name="standard-touch" 
                value="small" 
                label="Small Target Area" 
                checked 
            />
            <x-mbc::radio 
                id="touch-standard-2" 
                name="standard-touch" 
                value="harder" 
                label="Harder to Tap on Mobile" 
            />
        </div>
    </div>

    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>With Touch Target</x-mbc::typography>
        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
            <x-mbc::radio 
                id="touch-enabled-1" 
                name="touch-group" 
                value="large" 
                label="Larger Target Area" 
                :touch="true"
                checked 
            />
            <x-mbc::radio 
                id="touch-enabled-2" 
                name="touch-group" 
                value="easier" 
                label="Easier to Tap on Mobile" 
                :touch="true"
            />
        </div>
    </div>
</div>

Best Practice: Enable touch targets for mobile-first designs or responsive layouts. This follows Material Design guidelines for minimum touch target size (48x48 dp).

Properties link

mbc::radio link

Name Type Default Description
checked boolean false Whether the radio button is initially selected
color string secondary Radio button color (primary, secondary, or custom color)
disabled boolean false Whether the radio button is disabled
id string required Unique identifier for the radio button (required for labels)
label string null Label text displayed next to the radio button
name string required Group name - radios with same name belong to same group
touch boolean false Add 48x48 touch target wrapper for better mobile accessibility
value string required The value submitted when this radio is selected

References link

Edit this page