material-inspired-component-library
Version:
The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.
102 lines (99 loc) • 4.86 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MICL Radio Buttons</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_back,close,dark_mode&display=block">
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
<link rel="stylesheet" href="micl.css">
<link rel="stylesheet" href="docs.css">
<style>
label {
color: var(--md-sys-color-on-surface);
}
.micl-card-filled .micl-card__content {
padding-inline: 0;
}
.micl-card-outlined .micl-card__content {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.radio {
display: flex;
align-items: center;
}
</style>
</head>
<body class="light">
<div class="headline">
<h1 class="md-sys-typescale-emphasized-display-small">Radio buttons</h1>
<div id="settings-placeholder"></div>
</div>
<div class="cards">
<div class="micl-card-elevated">
<div class="micl-card__content">
<div class="radio">
<input type="radio" class="micl-radio" id="myradio1" name="choices" checked value="c1">
<label for="myradio1" class="md-sys-typescale-body-medium">First Choice</label>
</div>
<div class="radio">
<input type="radio" class="micl-radio" id="myradio2" name="choices" value="c2">
<label for="myradio2" class="md-sys-typescale-body-medium">Second Choice</label>
</div>
<div class="radio">
<input type="radio" class="micl-radio" id="myradio3" name="choices" value="c3">
<label for="myradio3" class="md-sys-typescale-body-medium">Third Choice</label>
</div>
<div class="radio">
<input type="radio" class="micl-radio" id="myradio4" name="choices" value="c4" disabled>
<label for="myradio4" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
</div>
</div>
</div>
<div class="micl-card-filled">
<div class="micl-card__content">
<div class="radio">
<input type="radio" class="micl-radio" id="myradio11" name="alternatives" checked value="c1">
<label for="myradio11" class="md-sys-typescale-body-medium">First Choice</label>
</div>
<div class="radio">
<input type="radio" class="micl-radio" id="myradio12" name="alternatives" value="c2">
<label for="myradio12" class="md-sys-typescale-body-medium">Second Choice</label>
</div>
<div class="radio">
<input type="radio" class="micl-radio" id="myradio13" name="alternatives" value="c3">
<label for="myradio13" class="md-sys-typescale-body-medium">Third Choice</label>
</div>
<div class="radio">
<input type="radio" class="micl-radio" id="myradio14" name="alternatives" value="c4" disabled>
<label for="myradio14" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
</div>
</div>
</div>
<div class="micl-card-outlined">
<div class="micl-card__content">
<div class="radio">
<label for="myradio21" class="md-sys-typescale-body-medium">First Choice</label>
<input type="radio" class="micl-radio" id="myradio21" name="selection" checked value="c1">
</div>
<div class="radio">
<label for="myradio22" class="md-sys-typescale-body-medium">Second Choice</label>
<input type="radio" class="micl-radio" id="myradio22" name="selection" value="c2">
</div>
<div class="radio">
<label for="myradio23" class="md-sys-typescale-body-medium">Third Choice</label>
<input type="radio" class="micl-radio" id="myradio23" name="selection" value="c3">
</div>
<div class="radio">
<label for="myradio24" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
<input type="radio" class="micl-radio" id="myradio24" name="selection" value="c4" disabled>
</div>
</div>
</div>
</div>
<script src="micl.js"></script>
<script src="docs.js"></script>
</body>
</html>