Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 11:24:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
docs/documentation/form/radio.html
View File

@@ -1,57 +1,55 @@
---
title: Radio button
layout: documentation
layout: docs
theme: library
doc-tab: form
doc-subtab: radio
breadcrumb:
- home
- documentation
- form
- form-radio
- home
- documentation
- form
- form-radio
meta:
colors: false
sizes: false
variables: false
---
{% capture radio_example %}
<div class="control">
<label class="radio">
<input type="radio" name="answer">
<input type="radio" name="answer" />
Yes
</label>
<label class="radio">
<input type="radio" name="answer">
<input type="radio" name="answer" />
No
</label>
</div>
{% endcapture %}
{% capture radio_default_example %}
<div class="control">
<label class="radio">
<input type="radio" name="foobar">
<input type="radio" name="foobar" />
Foo
</label>
<label class="radio">
<input type="radio" name="foobar" checked>
<input type="radio" name="foobar" checked />
Bar
</label>
</div>
{% endcapture %}
{% capture radio_disabled_example %}
<div class="control">
<label class="radio">
<input type="radio" name="rsvp">
<input type="radio" name="rsvp" />
Going
</label>
<label class="radio">
<input type="radio" name="rsvp">
<input type="radio" name="rsvp" />
Not going
</label>
<label class="radio" disabled>
<input type="radio" name="rsvp" disabled>
<input type="radio" name="rsvp" disabled />
Maybe
</label>
</div>
@@ -59,7 +57,8 @@ meta:
<div class="content">
<p>
The <code>radio</code> class is a simple wrapper around the <code>&lt;input type="radio"&gt;</code> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
The <code>radio</code> class is a simple wrapper around the <code>&lt;input type="radio"&gt;</code> HTML elements.
It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
</p>
<p>
Make sure the linked radio buttons have the <strong>same value</strong> for their <code>name</code> HTML attribute.
@@ -67,40 +66,42 @@ meta:
</div>
<div class="columns">
<div class="column is-half">
{{radio_example}}
</div>
<div class="column is-half">{{ radio_example }}</div>
<div class="column is-half bd-highlight-full">
{% highlight html %}{{radio_example}}{% endhighlight %}
{% highlight html -%}
{{- radio_example -}}
{%- endhighlight %}
</div>
</div>
<div class="content">
<p>
You can check a radio button by <strong>default</strong> by adding the <code>checked</code> HTML attribute to the <code>&lt;input&gt;</code> element.
You can check a radio button by <strong>default</strong> by adding the <code>checked</code> HTML attribute to the
<code>&lt;input&gt;</code> element.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{radio_default_example}}
</div>
<div class="column is-half">{{ radio_default_example }}</div>
<div class="column is-half bd-highlight-full">
{% highlight html %}{{radio_default_example}}{% endhighlight %}
{% highlight html -%}
{{- radio_default_example -}}
{%- endhighlight %}
</div>
</div>
<div class="content">
<p>
You can <strong>disable</strong> a radio button by adding the <code>disabled</code> HTML attribute to both the <code>&lt;label&gt;</code> and the <code>&lt;input&gt;</code>.
You can <strong>disable</strong> a radio button by adding the <code>disabled</code> HTML attribute to both the
<code>&lt;label&gt;</code> and the <code>&lt;input&gt;</code>.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{radio_disabled_example}}
</div>
<div class="column is-half">{{ radio_disabled_example }}</div>
<div class="column is-half bd-highlight-full">
{% highlight html %}{{radio_disabled_example}}{% endhighlight %}
{% highlight html -%}
{{- radio_disabled_example -}}
{%- endhighlight %}
</div>
</div>