Forms

Component status

<input type="text" placeholder="Text input">

<input type="text" placeholder="Disabled text input" disabled>

<input type="text" placeholder="Invalid input" aria-invalid="true">

<textarea placeholder="Textarea"></textarea>

<textarea placeholder="Textarea" disabled></textarea>

Number input

<label for="checkbox-example">Checkbox</label>
<input type="checkbox" id="checkbox-example">

<label for="disabled-checkbox-example">Disabled checkbox</label>
<input type="checkbox" id="disabled-checkbox-example" disabled>

<label for="toggle-checkbox-example">Toggle checkbox</label>
<input type="checkbox" id="toggle-checkbox-example" data-theme="toggle">

<fieldset>
<legend>Radio buttons</legend>

<input type="radio" id="radio-example-1" name="radio-example" value="1">
<label for="radio-example-1">Radio button 1</label>
<input type="radio" id="radio-example-2" name="radio-example" value="2">
<label for="radio-example-2">Radio button 2</label>
<input type="radio" id="radio-example-3" name="radio-example" value="3" disabled>
<label for="radio-example-3">Disabled radio button</label>
</fieldset>