Forms

Base Inputs

<div style="--span:6;" class="s-grid">
	<div>
		<label>Text<input type="text" /></label>		
		<label>Number<input type="number" /></label>			
		<label>Password<input type="password" /></label>
		<label>Email<input type="email" /></label>
		<label>Search<input type="search" /></label>
		<label>Tel<input type="tel" /></label>
		<label>Url<input type="url" /></label>
	</div>
</div>

Selectbox

<select>
	<option value="1">Ape</option>
	<option value="2">Elephant</option>
	<option value="3">Jaguar</option>
</select>

Non-text Inputs

<div style="--span:6;" class="s-grid">
	<div>	
		<label>Color<input type="color" /></label>
		<label>File<input type="file" /></label>
		<label>Hidden<input type="hidden" /></label>
		<label>Range<input type="range" min="0" max="100" /></label>
	</div>
</div>

Date Inputs

<div style="--span:6;" class="s-grid">
	<div>
		<label>Date<input type="date" /></label>
		<label>Datetime local<input type="datetime-local" /></label>
		<label>Month<input type="month" /></label>
		<label>Time<input type="time" /></label>
		<label>Week<input type="week" /></label>
	</div>
</div>

Radios & Checkboxes

<div style="--span:6;" class="s-grid">
	<div>
		<label>
			<input type="radio" name="color" value="red" />
			Red
		</label>
		<label>
			<input type="radio" name="color" value="blue" />
			Blue
		</label>
		<label>
			<input type="radio" name="color" value="pink" disabled />
			Pink
		</label>
		<label>
			<input type="checkbox" role="switch" />
			Switch Checkbox
		</label>
		<label><input type="checkbox" />Checkbox</label>
		<label><input type="checkbox" disabled />Disabled Checkbox</label>
	</div>
</div>

Input states

<form style="--span:3;" class="s-grid">
	<div>
		<label>
			<input type="text" placeholder="Valid" aria-invalid="false" />
		</label>
		<label>
			<input type="text" placeholder="Invalid" aria-invalid="true" />
		</label>
		<label>
			<input type="text" placeholder="Disabled" disabled />
		</label>
		<label>
			<input type="text" value="Readonly" readonly />
		</label>
		<label>
			<textarea placeholder="Valid" aria-invalid="false" >
			</textarea>
		</label>
		<label>
			<textarea placeholder="Valid" aria-invalid="true" >
			</textarea>
		</label>
	</div>
</form>

Input with Button

If an input is directly followed by a button, their wrapper gets the display:flex; style, and the button gets max-width: min-content; to match the width of its content. Additionally, the border radiuses are collapsed for a seamless appearance.

<search>
	<input type="search" name="" aria-label="Search" />
	<button type="submit">Search</button>
</search>

Form example

<form style="--span:3;" class="s-grid">
	<div>
		<label>
			Name
			<input placeholder="Name" type="text" />
		</label>
		<label>
			Email
			<input type="email"  placeholder="Email" />
		</label>
		<div style="--span-6:6;">
			<button>Submit</button>
		</div>
	</div>	
</form>

Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore.

Dialog title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores vitae officia, voluptatem modi quos quisquam similique tenetur voluptatum, ratione suscipit numquam dolore aperiam molestiae impedit. Ut, maiores? Alias, quos facilis.