<input>
The <input> element accepts user data in many formats defined by its type attribute — text, email, password, date, color, and more.
For validation states see [aria-invalid].
For helper text below inputs see <small>.
Basic Usage
<input type="text" placeholder="Type your text" />With Label
Always pair inputs with a <label> or aria-label so screen readers can identify the field.
<label for="input-email">Email</label>
<input type="email" placeholder="Type your email" id="input-email" />With Helper Text
Helper text provides additional context about the input, such as instructions or character limits.
Use <small> element associated with a form control via aria-describedby to associate the helper text with the input for screen readers.
<label for="input-email">Email</label>
<input type="email" id="input-email" aria-describedby="input-email-helper" placeholder="Type your email" />
<small id="input-email-helper">Cannot be empty.</small>Validation States
Validation states are provided with aria-invalid. See more at [aria-invalid]
Note: The
<small>element automatically inherits the validation state colors.
<label for="first-name">First Name</label>
<input type="text" id="first-name" aria-invalid="false" value="John" placeholder="First Name" aria-describedby="first-name-helper" />
<small id="first-name-helper">First name looks good!</small>
<label for="last-name">Last Name</label>
<input type="text" id="last-name" aria-invalid="true" placeholder="Last Name" aria-describedby="last-name-helper" />
<small id="last-name-helper">Last name cannot be empty.</small>Miscellaneous Input Types
<label for="input-number">Number</label>
<input type="number" placeholder="Type your number" id="input-number" />
<label for="input-password">Password</label>
<input type="password" placeholder="Type your password" id="input-password" />
<label for="input-telefone">Telefone</label>
<input type="telefone" placeholder="Type your telefone" id="input-telefone" />
<label for="input-url">Url</label>
<input type="url" placeholder="Type your url" id="input-url" />Date Inputs
Datetime inputs come with an icon.
<label for="input-date">Date</label>
<input type="date" placeholder="Type your date" id="input-date" />
<label for="input-datetime-local">Datetime-local</label>
<input type="datetime-local" placeholder="Type your datetime-local" id="input-datetime-local" />
<label for="input-month">Month</label>
<input type="month" placeholder="Type your month" id="input-month" />
<label for="input-time">Time</label>
<input type="time" placeholder="Type your time" id="input-time" />Search Input
type="search" comes with a distinctive style.
<input type="search" placeholder="Type your search" />Color Input
type="color" is also consistent with the other input types.
<input type="color" value="#ff0000" placeholder="Type your color" />File Input
Input type file button has a secondary button style.
<input type="file" placeholder="Type your file" />Checkboxes
The native <input type="checkbox"> with a custom and responsive style.
Basic Usage
<label>
<input type="checkbox" checked="checked" />
Checkbox
</label>
Vertical Stacking
<fieldset>
<legend>Language preferences:</legend>
<label>
<input type="checkbox" name="english" checked="checked" />
English
</label>
<label>
<input type="checkbox" name="mandarin" />
Mandarin
</label>
<label aria-disabled="true">
<input type="checkbox" name="dothraki" disabled="disabled" />
Dothraki
</label>
</fieldset>
Horizontal Stacking
<fieldset>
<legend>Language preferences:</legend>
<input type="checkbox" id="hindi" name="hindi" checked="checked" />
<label for="hindi">Hindi</label>
<input type="checkbox" id="swahili" name="swahili" />
<label for="swahili">Swahili</label>
<input type="checkbox" id="navi" name="navi" disabled="disabled" />
<label for="navi" aria-disabled="true">Na'vi</label>
</fieldset>
Radios
The native <input type="radio"> with a custom and responsive style.
Basic Usage
<label>
<input type="radio" checked="checked" value="yes" />
Radio button
</label>
Vertical Stacking
<fieldset>
<legend>Language preference:</legend>
<label>
<input type="radio" name="language" checked="checked" value="english" />
English
</label>
<label>
<input type="radio" name="language" value="mandarin" />
Mandarin
</label>
<label aria-disabled="true">
<input type="radio" name="language" value="dothraki" disabled="disabled" />
Dothraki
</label>
</fieldset>
Horizontal Stacking
<fieldset>
<legend>Second language:</legend>
<input type="radio" id="hindi" name="second-language" checked="checked" value="hindi" />
<label for="hindi">Hindi</label>
<input type="radio" id="swahili" name="second-language" value="swahili" />
<label for="swahili">Swahili</label>
<input type="radio" id="navi" name="second-language" value="navi" disabled="disabled" />
<label for="navi" aria-disabled="true">Na'vi</label>
</fieldset>
Range
The native <input type="range"> with a custom and responsive style.
Basic Usage
<label>
Range slider
<input type="range" />
</label>
With Min and Max
<label>
Volume
<input type="range" min="0" max="100" value="50" />
</label>
With Step
<label>
Rating (0-10)
<input type="range" min="0" max="10" step="1" value="5" />
</label>
Switch
The native <input type="checkbox"> styled as a switch, using the role="switch" for accessibility.
Basic Usage
<label>
<input type="checkbox" checked="checked" role="switch" />
Switch
</label>
Input Buttons
type="submit", type="button" and type="reset" inputs are also displayed as buttons - use them to clear or submit forms without JavaScript.
All form buttons are width: 100%; by default, to match with the other form elements.
Reset inputs have the secondary style by default.
<input type="button" value="Input Button" />
<input type="submit" value="Input Submit" />
<input type="reset" value="Input Reset" />Variants
.ghost creates transparent background buttons with colored text and borders, useful for secondary actions where you want minimal visual weight.
.subtle creates buttons with a more muted appearance, often used for less prominent actions.