Getting Started
Installation Colours Typography UtilitiesComponents
Alert Avatar Badge Button Card Drawer Grid Image Input Lists Navigation Modal Slider Rating Toast
input-text - To be given to the
input element which takes in text, passwords
input-wrong-password - Style to
be applied when the password is wrong
input-disabled - To be given
when the user shouldn't be allowed to enter anything in the input
box
Note: When using disabled classes, don't forget to add the 'disabled' keyword in the html
<div>
<input type="input" class="input-text" placeholder="Username" />
<input type="password" class="input-text" placeholder="Password" />
<input type="password" class="input-text input-wrong-password" placeholder="Wrong password"/>
<input type="input" class="input-text input-disabled" placeholder="Disabled" disabled />
</div>
radio-group - To be given to the
wrapper class containing all the radio buttons; can be omitted if
only one radio button is present
<div class="radio-group">
<label for="radio-1">
<input id="radio-1" type="radio" name="radio" value="checked" checked />
Checked
</label>
<label for="radio-2">
<input id="radio-2" type="radio" name="radio" value="unchecked" />
Unchecked
</label>
<label for="radio-3">
<input id="radio-3" type="radio" name="radio" value="disabled" disabled />
Disabled
</label>
</div>
checkbox-group - To be given to
the wrapper class containing all the checkboxes; can be omitted if
only one checkbox is present
<div class="checkbox-group">
<label for="checkbox-1">
<input id="checkbox-1"type="checkbox" name="checkbox" value="checked" checked />
Checked
</label>
<label for="checkbox-2">
<input id="checkbox-2" type="checkbox" name="checkbox" value="unchecked" />
Unchecked
</label>
<label for="checkbox-3">
<input id="checkbox-3" type="checkbox" name="checkbox" value="disabled" disabled />
Disabled
</label>
</div>