logo
v3.0.1

Radio Button

Display a radio button with or without a label. The default radio button colour is blue but there are nine colours available to choose from. 

        
            <x-bladewind::radio name="tnc"  />

What kind of movies do you like?


    <x-bladewind::radio label="Action" name="genre"  />
    <x-bladewind::radio label="Comedy" name="genre"  />
    <x-bladewind::radio label="Drama" name="genre"  />
    <x-bladewind::radio label="Thriller" name="genre" />



    <x-bladewind::radio
        label="I am checked by default"
        checked="true"
        name="check_me"  />
   

    <x-bladewind::radio
        label="I am disabled"
        disabled="true"  />

Coloured Checkboxes

Like most of the BladewindUI components, radios also come in nine colours to enable the components sit better in most designs with various colour schemes. 

        
            <x-bladewind::radio
                color="red"
                checked="true"
                label="I am a red radio" />

            <x-bladewind::radio
                color="yellow"
                checked="true"
                label="I am a yellow radio" />

            <x-bladewind::radio
                color="green"
                checked="true"
                label="I am a green radio" />

            <x-bladewind::radio
                color="pink"
                checked="true"
                label="I am a pink radio" />

            <x-bladewind::radio
                color="cyan"
                checked="true"
                label="I am a cyan radio" />

            <x-bladewind::radio
                color="black"
                checked="true"
                label="I am a black radio" />

            <x-bladewind::radio
                color="purple"
                checked="true"
                label="I am a purple radio" />

            <x-bladewind::radio
                color="orange"
                checked="true"
                label="I am a orange radio" />

            <x-bladewind::radio
                color="blue"
                checked="true"
                label="I am a blue radio" />

            <x-bladewind::radio
                color="violet"
                checked="true"
                label="I am a violet radio" />

            <x-bladewind::radio
                color="indigo"
                checked="true"
                label="I am a indigo radio" />

            <x-bladewind::radio
                color="fuchsia"
                checked="true"
                label="I am a fuchsia radio" />

Radio buttons and forms

When using radio buttons with forms, it is always good practice to give the radio button a name and value. That way, when the form is submitted, the value of the radio button can be retrieved from its name. It is important to note that, in some cases, if the user does not select the radio button, the name of the radio button will be ignored completely from your payload. 

        
<x-bladewind::radio
            name="notify_me"
            value="1"
            label="Send me weekly newsletters" />

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Radio Button component.

IMPORTANT: All component text/labels can be found in lang/bladewind.php. You can translate these into your preferred languages

Option Default Available Values
name radio This name can be accessed when the radio button is submitted in the form. The name is also available as part of the css classes.
label blank Text to be displayed next to the radio button.
value blank In case you are editing a form, the value passed will be set on the value attribute of the radio button. <input type="radio" value="" ../>
checked false Determines if the radio button is checked or not. Value needs to be set as a string not boolean.
true false
disabled false Determines if the radio button is disabled or not. Value needs to be set as a string not boolean.
true false
add_clearing true Adds a margin to the bottom of the radio button to separate it from the next form element. Value needs to be set as a string not boolean.
true false
class bw-radio button Any additional css classes can be added using this attribute.
color blue There are twelve colors to choose from.
red yellow green blue pink cyan purple gray orange violet indigo fuchsia
label_css mr-6 Applies styling to the radio button label.

Radio button with all attributes defined

        
            <x-bladewind::radio
                label="I agree to the terms and conditions"
                checked="false"
                disabled="false"
                color="pink"
                name="tnc"
                value="yes"
                class="shadow-sm" />
The source file for this component is available in resources > views > components > bladewind > radio.blade.php