Input
Experiment
Dependencies:
typography
import "@solutas/mgnl-elements-css/build/components/input/input.css"
Input
Default input
<input class="mgnl-form-field" placeholder="add text" />
Invalid (client side)
Default input
<input class="mgnl-form-field" required />
Invalid (server side)
Default input
<input class="mgnl-form-field is-invalid" />
Password
Default input
<input class="mgnl-form-field" type="password" />
Number
Default input
<input class="mgnl-form-field" type="number" />
Date (default html)
Default input
<input class="mgnl-form-field" type="date" />
Use CSS Var
--mgnl-color-gray-30
--mgnl-animation-duration-50
--mgnl-animation-timing-50
--mgnl-typography-ui-default-md-font-family
--mgnl-typography-ui-default-md-font-size
--mgnl-color-gray-60
--mgnl-color-emerald-50
--mgnl-dimension-2
--mgnl-input-neutral-border-error
--mgnl-input-neutral-border-default