Radio select - CSS Component
...
Browser support
Detected engine:
Chromium
Webkit
Gecko
Construction
The CSS component uses a <fieldset> tag.
z-radio-select
The z-radio-select is the main parameter used to render the radio select component.
The z-radio-select parameter has two optional modifiers: inline and outlined. The pattern would be <?inline><?:outlined>.
- The
inlinemodifier will render the radio select options in a row.
- The
outlinedmodifier will render the radio select options with a border.
Playground
Customization
HTML Examples
Imports
html
<script type="module" src="/0.5.0/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/RadioSelect.css" />Code
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZDS | Chip CSS example</title>
<!-- #region imports -->
<script type="module" src="/0.5.0/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/RadioSelect.css" />
<!-- #endregion imports -->
<link rel="stylesheet" href="/0.5.0/examples/styles.css" />
<script type="module" src="/0.5.0/examples/params-script.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>-</th>
<th>inline</th>
</tr>
</thead>
<tbody>
<tr>
<th>-</th>
<td>
<div>
<fieldset z-radio-select>
<legend>Radio select</legend>
<label>
<span>HTML</span>
<input type="radio" name="radio-select" value="HTML">
</label>
<label>
<span>CSS</span>
<input type="radio" name="radio-select" value="CSS">
</label>
<label>
<span>JavaScript</span>
<input type="radio" name="radio-select" value="javascript">
</label>
</fieldset>
</div>
</td>
<td>
<div>
<fieldset z-radio-select="inline">
<legend>Radio select</legend>
<label>
<span>HTML</span>
<input type="radio" name="radio-select" value="HTML">
</label>
<label>
<span>CSS</span>
<input type="radio" name="radio-select" value="CSS">
</label>
<label>
<span>JavaScript</span>
<input type="radio" name="radio-select" value="javascript">
</label>
</fieldset>
</div>
</td>
</tr>
<tr>
<th>with value and disabled option</th>
<td>
<div>
<fieldset z-radio-select>
<legend>Radio select</legend>
<label>
<span>HTML</span>
<input type="radio" name="radio-select" value="HTML">
</label>
<label>
<span>CSS</span>
<input type="radio" name="radio-select" value="CSS" checked>
</label>
<label>
<span>JavaScript</span>
<input type="radio" name="radio-select" value="js" disabled>
</label>
</fieldset>
</div>
</td>
<td>
<div>
<fieldset z-radio-select="inline">
<legend>Radio select</legend>
<label>
<span>HTML</span>
<input type="radio" name="radio-select" value="HTML">
</label>
<label>
<span>CSS</span>
<input type="radio" name="radio-select" value="CSS" checked>
</label>
<label>
<span>JavaScript</span>
<input type="radio" name="radio-select" value="js" disabled>
</label>
</fieldset>
</div>
</td>
</tr>
<tr>
<th>with value and disabled</th>
<td>
<div>
<fieldset z-radio-select>
<legend>Radio select</legend>
<label>
<span>HTML</span>
<input type="radio" name="radio-select" value="HTML" disabled>
</label>
<label>
<span>CSS</span>
<input type="radio" name="radio-select" value="CSS" disabled checked>
</label>
<label>
<span>JavaScript</span>
<input type="radio" name="radio-select" value="js" disabled>
</label>
</fieldset>
</div>
</td>
<td>
<div>
<fieldset z-radio-select="inline">
<legend>Radio select</legend>
<label>
<span>HTML</span>
<input type="radio" name="radio-select" value="HTML" disabled>
</label>
<label>
<span>CSS</span>
<input type="radio" name="radio-select" value="CSS" disabled checked>
</label>
<label>
<span>JavaScript</span>
<input type="radio" name="radio-select" value="js" disabled>
</label>
</fieldset>
</div>
</td>
</tr>
<tr>
<th>required</th>
<td>
<div>
<fieldset z-radio-select>
<legend>Radio select</legend>
<label>
<span>HTML</span>
<input type="radio" name="radio-select" value="HTML" required>
</label>
<label>
<span>CSS</span>
<input type="radio" name="radio-select" value="CSS" required checked>
</label>
<label>
<span>JavaScript</span>
<input type="radio" name="radio-select" value="js" required>
</label>
</fieldset>
</div>
</td>
<td>
<div>
<fieldset z-radio-select="inline">
<legend>Radio select</legend>
<label>
<span>HTML</span>
<input type="radio" name="radio-select" value="HTML" required>
</label>
<label>
<span>CSS</span>
<input type="radio" name="radio-select" value="CSS" required checked>
</label>
<label>
<span>JavaScript</span>
<input type="radio" name="radio-select" value="js" required>
</label>
</fieldset>
</div>
</td>
</tr>
<tr>
<th>invalid</th>
<td>
<div>
<fieldset z-radio-select>
<legend>Radio select</legend>
<label>
<span>HTML</span>
<input type="radio" name="radio-select" value="HTML" data-invalid>
</label>
<label>
<span>CSS</span>
<input type="radio" name="radio-select" value="CSS" data-invalid checked>
</label>
<label>
<span>JavaScript</span>
<small>Invalid input</small>
<input type="radio" name="radio-select" value="js" data-invalid>
</label>
</fieldset>
</div>
</td>
<td>
<div>
<fieldset z-radio-select="inline">
<legend>Radio select</legend>
<label>
<span>HTML</span>
<input type="radio" name="radio-select" value="HTML" data-invalid>
</label>
<label>
<span>CSS</span>
<input type="radio" name="radio-select" value="CSS" data-invalid checked>
</label>
<label>
<span>JavaScript</span>
<small>Invalid input</small>
<input type="radio" name="radio-select" value="js" data-invalid>
</label>
</fieldset>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>