BladewindUI
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" />
<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" />
<x-bladewind.radio-button
label="I am checked by default"
checked="true"
name="check_me" />
<x-bladewind.radio-button
label="I am disabled"
disabled="true" />
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" />
The table below shows a comprehensive list of all the attributes available for the Radio Button component.
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. |
label_css | mr-6 | Applies styling to the radio button label. |
<x-bladewind.radio-button
label="I agree to the terms and conditions"
checked="false"
disabled="false"
name="tnc"
value="yes"
class="shadow-sm" />
resources > views > components > bladewind > radio-button.blade.php