Radio select - CSS Component โ
...
Browser support โ
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
inline
modifier will render the radio select options in a row.
- The
outlined
modifier will render the radio select options with a border.
Playground โ
Customization โ
HTML Examples โ
Imports
html
<script type="module" src="/0.4.3/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@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.4.3/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/RadioSelect.css" />
<!-- #endregion imports -->
<link rel="stylesheet" href="/0.4.3/examples/styles.css" />
<script type="module" src="/0.4.3/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>