Form

Define basic form controls.

Input

Use form-input to style <input> element.
Use form-input–{theme-colors} like form-input–danger to customize color.

<form class="d-flex flex-column gap-4">
	<div class="d-flex gap-4">
		<div>
			<label class="label-md font-sbold mb-1">First name</label>
			<input type="text" class="form-input" placeholder="James">
		</div>
		<div>
			<label class="label-md font-sbold mb-1">Last name</label>
			<input type="text" class="form-input" placeholder="Bond">
		</div>
	</div>
	<div class="d-flex gap-4">
		<div>
			<label class="label-md font-sbold mb-1">Work email</label>
			<input type="email" class="form-input form-input--danger" placeholder="007@mi6.uk">
		</div>
		<div>
			<label class="label-md font-sbold mb-1">Phone</label>
			<input type="number" class="form-input" placeholder="+44">
		</div>
	</div>
	<input type="submit" class="btn btn-primary flex-self-start">
</form>

Checkbox

Use form-checkbox to style <checkbox> element.
Use form-checkbox--{theme-colors} like form-checkbox--secondary to customize color.

<form class="d-flex gap-4">
	<label class="d-inline-flex flex-items-center gap-2">
		<input type="checkbox" class="form-checkbox" checked="checked" />
		Available for mission.
	</label>
		<label class="d-inline-flex flex-items-center gap-2">
      <input type="checkbox" class="form-checkbox form-checkbox--secondary" checked="checked" />
      Available for mission.
    </label>
</form>

Radio

Use form-radio to style <radio> element.
Use form-radio--{theme-colors} like form-radio--secondary to customize color.

<form class="d-flex gap-4">
	<label> <input type="radio" class="form-radio" id="dc" name="bondies" checked /> Dainel Craig </label>
	<label> <input type="radio" class="form-radio form-radio--secondary" id="pb" name="bondies" /> Pierce Brosnan </label>
</form>

Select

Use form-select to style <select> element.

<form class="d-flex gap-4">
	<label class="d-inline-flex flex-items-center gap-2">
		<input type="checkbox" class="form-checkbox" checked="checked" />
		Available for mission.
	</label>
</form>

TextArea

Use form-textarea to style <textarea> element.
Use form-textarea--{theme-colors} like form-textarea--secondary to customize color.

	<form>
		<textarea class="form-textarea" id="bond-area"></textarea>
	</form>

SASS

Override these sass variables in your scss file.

Variables

	// form input
	--input-shadow: rgba(71, 71, 71, 0.16) 0px 0px 0px 1px;
	--input-focus-shadow: var(--primary) 0px 0px 0px 1px;