Input

Default

Apply .form-control to native inputs.

<div>
	<label class="form-label" for="inputDefault">Text input</label>
	<input class="form-control" id="inputDefault" name="textInput" placeholder="some text" />
</div>

Textarea

Apply .form-control to textareas.

<div>
	<label class="form-label" for="textareaExample">Message</label>
	<textarea
		class="form-control"
		id="textareaExample"
		name="textareaExample"
		placeholder="Your message"></textarea>
</div>

Invalid

Combine .is-invalid and aria-invalid=“true”. Link feedback with aria-describedby and its id.

<div>
	<label class="form-label" for="invalidInput">Input label</label>
	<input
		class="form-control is-invalid"
		id="invalidInput"
		name="invalidInput"
		placeholder="some text"
		aria-invalid="true"
		aria-describedby="invalidInputFeedback" />
	<div class="invalid-feedback" id="invalidInputFeedback">Please enter a valid text.</div>
</div>

Disabled

Use the native disabled attribute.

<div>
	<label class="form-label" for="disabledInput">Disabled input</label>
	<input
		class="form-control"
		id="disabledInput"
		name="disabledInput"
		disabled
		value="some value" />
</div>

CSS Variables

Override these variables on the component or an ancestor.

--form-control-bg-color: var(--bg-surface);
--form-control-border-width: var(--border-width);
--form-control-border-color: var(--control-border-color);
--form-control-border-radius: var(--border-radius);
--form-control-padding-y: var(--spacer-1);
--form-control-padding-x: var(--spacer-3);
--form-control-font-size: var(--font-size);
--form-control-font-weight: 400;
--form-control-placeholder-color: var(--text-subtle);
--form-control-disabled-text-color: var(--disabled-text-color);
--form-control-disabled-bg-color: var(--disabled-bg-color);
--form-control-disabled-border-color: var(--disabled-border-color);
--form-control-focus-border-color: var(--primary-hover);
--form-control-focus-outline-width: var(--focus-outline-width);
--form-control-focus-outline-style: var(--focus-outline-style);
--form-control-focus-outline-color: var(--focus-outline-color);
--form-control-focus-outline-offset: var(--focus-offset);
--form-control-transition-duration: var(--transition-duration);
--form-control-transition-easing: var(--transition-easing);