v2.5.12

LTR RTL

v2.5.12

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-button name="tnc"  />

What kind of movies do you like?

Action Comedy Drama Thriller

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

I am checked by default

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

I am disabled I am checked and disabled

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

Coloured Checkboxes

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

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

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

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

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

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

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

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

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

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

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

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

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

Full List Of Attributes

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

IMPORTANT: Projects running Laravel 8 please read this

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-button
                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-button.blade.php