Forms

Kelp tries to stick closely to browser default styling for forms elements, while smoothing out a few rough edges.

You can customize the focus styles using a handful of CSS variables.

Label

Password

Date

Time

Color

Tough Choices Option 1 Option 2

Pick an Option Option A Option B

Select Menu

Readonly

Textarea

<label for="input">Label</label>
<input type="text" id="input">

<label for="password">Password</label>
<input type="password" id="password">

<label for="date">Date</label>
<input type="date" id="date">

<label for="time">Time</label>
<input type="time" id="time">

<label for="color">Color</label>
<input type="color" id="color">

<fieldset>
	<legend>Tough Choices</legend>
	<label>
		<input type="checkbox">
		Option 1
	</label>
	<label>
		<input type="checkbox">
		Option 2
	</label>
</fieldset>

<fieldset>
	<leged>Pick an Option</leged>
	<label>
		<input type="radio" name="radioset">
		Option A
	</label>
	<label>
		<input type="radio" name="radioset">
		Option B
	</label>
</fieldset>

<label for="select">Select Menu</label>
<select id="select">
	<option>Select 1</option>
	<option>Select 2</option>
	<option>Select 3</option>
</select>

<label for="read-only">Readonly</label>
<input type="text" id="read-only" value="I am read only" readonly>

<label for="select" for="textarea">Textarea</label>
<textarea id="text-area"></textarea>

Documentation

Forms