@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
153 lines (151 loc) • 6.34 kB
HTML
<html>
<head>
<title>Kit Digital - Universidad San Sebastían</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/css/theme.css" rel="stylesheet" type="text/css" />
<link href="/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body class>
<div class="container">
<h2 class="my-24">Radio Buttons</h2>
<div class="row">
<div class="col-md-6 uss-form">
<div class="uss-form-group mb-40">
<label for="inputEmail" class="uss-form__label">
Label
<i class="uss-icon ri-question-line"></i>
</label>
<!-- select -->
<select class="uss-form__input" id="inputEmail">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div id="emailHelp" class="uss-form__help">Mensaje de contexto.</div>
</div>
<div class="uss-form-group">
<label for="" class="uss-form__label uss-form__label--margin-plus">
Radio button
<i class="uss-icon ri-question-line"></i>
</label>
<input id="radio2-1" type="radio" value="select an op" name="radio2-group" />
<label class="uss-form__radio-label" for="radio2-1"
>Use radio buttons if the meaning of the empty</label
>
<input id="radio2-2" type="radio" value="between these" name="radio2-group" />
<label class="uss-form__radio-label" for="radio2-2"> Between these values </label>
<input id="radio2-3" type="radio" value="between these" name="radio2-group" disabled />
<label class="uss-form__radio-label" for="radio2-3">
Between these values disable
</label>
<input id="radio2-4" type="radio" value="between these" name="radio2-group" checked />
<label class="uss-form__radio-label" for="radio2-4"> Other </label>
</div>
<div class="uss-form-group">
<label for="" class="uss-form__label uss-form__label--margin-plus">
Checkboxes
<i class="uss-icon ri-question-line"></i>
</label>
<input id="checkbox2-1" type="checkbox" value="select an op" name="checkbox2-group" />
<label class="uss-form__radio-label" for="checkbox2-1"
>Use radio buttons if the meaning of the empty</label
>
<input id="checkbox2-2" type="checkbox" value="between these" name="checkbox2-group" />
<label class="uss-form__radio-label" for="checkbox2-2"> Between these values </label>
<input
id="checkbox2-3"
type="checkbox"
value="between these"
name="checkbox2-group"
disabled
/>
<label class="uss-form__radio-label" for="checkbox2-3">
Between these values disable
</label>
<input
id="checkbox2-4"
type="checkbox"
value="between these"
name="checkbox2-group"
checked
/>
<label class="uss-form__radio-label" for="checkbox2-4"> Other </label>
</div>
<div class="uss-form-group mb-40">
<label for="inputEmail" class="uss-form__label">
Text Area
<i class="uss-icon ri-question-line"></i>
</label>
<textarea class="uss-form__input" name="textarea" rows="10" cols="50">
Write something here</textarea
>
<div id="emailHelp" class="uss-form__help">Mensaje de contexto.</div>
</div>
<div class="uss-form-group mb-40">
<label for="inputEmail" class="uss-form__label">
Label normal
<i class="uss-icon ri-question-line"></i>
</label>
<input type="" class="uss-form__input" id="inputEmail" aria-describedby="inputEmail" />
<div id="emailHelp" class="uss-form__help">Mensaje de contexto.</div>
</div>
<div class="uss-form-group mb-40 uss-form-group--success">
<label for="inputEmail" class="uss-form__label"> Label </label>
<input
type="email"
class="uss-form__input"
id="inputEmail"
aria-describedby="inputEmail"
/>
<div id="emailHelp" class="uss-form__help">
<i class="uss-icon ri-checkbox-circle-line"></i>
Mensaje de contexto.
</div>
</div>
<div class="uss-form-group mb-40 uss-form-group--warning">
<label for="inputEmail" class="uss-form__label"> Label </label>
<input
type="email"
class="uss-form__input"
id="inputEmail"
aria-describedby="inputEmail"
/>
<div id="emailHelp" class="uss-form__help">
<i class="uss-icon ri-alert-line"></i>
Mensaje de contexto.
</div>
</div>
<div class="uss-form-group mb-40 uss-form-group--error">
<label for="inputEmail" class="uss-form__label"> Label </label>
<input
type="email"
class="uss-form__input"
id="inputEmail"
aria-describedby="inputEmail"
/>
<div id="emailHelp" class="uss-form__help">
<i class="uss-icon ri-question-line"></i>
Mensaje de contexto.
</div>
</div>
<div class="uss-form-group mb-40 uss-form-group--disabled">
<label for="inputEmail" class="uss-form__label"> Label disabled </label>
<input
type="email"
class="uss-form__input"
value="texto disabled"
id="inputEmail"
aria-describedby="inputEmail"
/>
<div id="emailHelp" class="uss-form__help">Mensaje de contexto.</div>
</div>
</div>
</div>
</div>
<script src="/js/main.js" type="module"></script>
</body>
</html>