tabler/pages/_includes/forms/form-elements-1.html

{% include "parts/form/input.html" type="static" %}
{% include "parts/form/input.html" type="text" hint="Here's some more info." %}
{% include "parts/form/input.html" type="password" hint="Here's some more info." %}

<div class="mb-3">
	<label class="form-label">Disabled</label>
	<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled..."
	       value="Well, she turned me into a newt." disabled>
</div>
<div class="mb-3">
	<label class="form-label">Readonly</label>
	<input type="text" class="form-control" name="example-disabled-input" placeholder="Readonly..."
	       value="Well, how'd you become king, then?" readonly>
</div>
<div class="mb-3">
	<label class="form-label required">Required</label>
	<input type="text" class="form-control" name="example-required-input" placeholder="Required..." >
</div>
<div class="mb-3">
	<label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
	<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</div>

{% include "parts/form/select.html" %}
{% include "parts/form/select.html" label="Select multiple" multiple=true %}

<div class="mb-3">
	<div class="form-label">Select multiple states</div>
	{% include "ui/select.html" key="states" multiple=true %}
</div>

<div class="mb-3">
	<label class="form-label">Input group</label>
	<div class="input-group mb-2">
		<input type="text" class="form-control" placeholder="Search for…">
		<button class="btn" type="button">Go!</button>
	</div>
	<div class="input-group">
		<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			Action
		</button>
		{% include "ui/dropdown-menu.html" %}
		<input type="text" class="form-control" aria-label="Text input with dropdown button">
	</div>
</div>
<div class="mb-3">
	<label class="form-label">Input group buttons</label>
	<div class="input-group">
		<input type="text" class="form-control">
		<button type="button" class="btn">Action</button>
		<button data-bs-toggle="dropdown" type="button" class="btn dropdown-toggle dropdown-toggle-split"></button>
		{% include "ui/dropdown-menu.html" right=true %}
	</div>
</div>

{% include "parts/form/input-icon.html" %}
{% include "parts/form/input-icon-separated.html" %}


<div class="mb-3">
	<label class="form-label">Input with help icon</label>
	<div class="row g-2">
		<div class="col">
			<input type="text" class="form-control" placeholder="Search for…">
		</div>
		<div class="col-auto align-self-center">
			<span class="form-help" data-bs-toggle="popover" data-bs-placement="top"
			      data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>"
			      data-bs-html="true">?</span>
		</div>
	</div>
</div>