Radio button | Bulma-Gomponents

Radio button

The b.Radio constructor creates a radio input, together with its label container.

Modifier	Action
`b.Disabled`	Disable the radio button

Child	Action
`b.OnInput(...any)`	Apply children to the `<input>` element
`b.OnLabel(...any)`	Apply children to the `<label>` element
`string`	Add to the `<label>` element
`gomponents.Node`of type `gomponents.AttributeType`	Apply attribute to the `<input>` element
`gomponents.Node`of type `gomponents.ElementType`	Add element to the `<label>` element
`e.Element`	Add element to the `<label>` element
Anything else	Apply child to the `<input>` element

Bulma examples

Bulma documentation

Example

Code

b.Control(
	b.Radio(e.Name("answer"), "Yes"),
	b.Radio(e.Name("answer"), "No"),
)

ResultHTML

Yes No

<div class="control"><label class="radio"><input type="radio" name="answer"> Yes</label><label class="radio"><input type="radio" name="answer"> No</label></div>

Example

Code

b.Control(
	b.Radio(e.Name("foobar"), "Foo"),
	b.Radio(e.Name("foobar"), "Bar", b.Checked),
)

ResultHTML

Foo Bar

<div class="control"><label class="radio"><input type="radio" name="foobar"> Foo</label><label class="radio"><input type="radio" name="foobar" checked> Bar</label></div>

Example

Code

b.Control(
	b.Radio(e.Name("rsvp"), "Going"),
	b.Radio(e.Name("rsvp"), "Not going"),
	b.Radio(b.Disabled, e.Name("rsvp"), "Maybe"),
)

ResultHTML

Going Not going Maybe

<div class="control"><label class="radio"><input type="radio" name="rsvp"> Going</label><label class="radio"><input type="radio" name="rsvp"> Not going</label><label class="radio" disabled><input type="radio" disabled name="rsvp"> Maybe</label></div>

List of Radio Buttons

Bulma documentation

Example

Code

b.Radios(
	b.Radio(e.Name("rsvp"), "Going"),
	b.Radio(e.Name("rsvp"), "Not going"),
	b.Radio(b.Disabled, e.Name("rsvp"), "Maybe"),
)

ResultHTML

Going Not going Maybe

<div class="radios"><label class="radio"><input type="radio" name="rsvp"> Going</label><label class="radio"><input type="radio" name="rsvp"> Not going</label><label class="radio" disabled><input type="radio" disabled name="rsvp"> Maybe</label></div>