Forms
Form input
Native form controls keep their built-in behavior. Lumo styles their element type and reads real states like disabled, required, and aria-invalid.
Default
<label>Text input
<input type="text" placeholder="Placeholder text">
</label>Select
<label>Select
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</label>Checkbox
<label>
<input type="checkbox"> Checkbox
</label>Radio button
<label>
<input type="radio" name="radio"> Radio button 1
</label>
<label>
<input type="radio" name="radio"> Radio button 2
</label>
<label>
<input type="radio" name="radio"> Radio button 3
</label>Switch
<label>Switch
<input type="checkbox" role="switch">
</label>Input with validation state
<label>Invalid input
<input type="text" aria-invalid="true" value="Wrong email">
<small>This field contains an error.</small>
</label>
<label>Valid input
<input type="text" aria-invalid="false" value="Correct value">
<small>This field contains a valid value.</small>
</label>Disabled input
<label>Disabled input
<input type="text" value="Lorem ipsum dolor" disabled>
</label>Search
<label>Search input
<input type="search" placeholder="Search...">
</label>Inline label
<label aria-orientation="horizontal">Input:
<input type="text" aria-label="Given name input" required>
</label>Textarea
<label>Textarea
<textarea placeholder="Write something..."></textarea>
</label>Color picker input
<label>Color picker
<input type="color">
</label>Progress bar
<progress></progress>
<progress max="100" value="75"></progress>