tabler/shared/components/forms/FormElements1.astro

---
// Static inputs, plain selects, a TomSelect "states" multi-select, input groups
// with dropdowns, icon/loader/separated inputs, and a help-icon input.
// Registers the TomSelect init for #select-states via addPageScript (synchronous,
// before any await) — mirrors the include's {% capture_script %}. This is the
// FIRST page script, matching the reference order (select-states precedes the
// FormElements6 scripts).
import Icon from '@ui/Icon.astro';
import FormGroup from '@ui/FormGroup.astro';
import selects from '@data/selects.json';
import { addPageScript } from '@shared/lib/page-scripts';
import InlineScript from '@shared/components/InlineScript.astro';

const states = (selects as { states: { options: Record<string, { name: string; selected?: boolean }> } }).states.options;

const selectStatesScript = `<script>
	document.addEventListener("DOMContentLoaded", function () {
		window.tabler_select = window.tabler_select || {};

		var el;
		window.TomSelect && (window.tabler_select["select-states"] = new TomSelect(el = document.getElementById('select-states'), {
			copyClassesToDropdown: false,
			dropdownParent: 'body',

			controlInput: '<input>',

			render:{
				item: function(data,escape) {
					if( data.customProperties ){
						return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
					}
					return '<div>' + escape(data.text) + '</div>';
				},
				option: function(data,escape){
					if( data.customProperties ){
						return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
					}
					return '<div>' + escape(data.text) + '</div>';
				},
			},
		}));

	});
</script>`;

addPageScript(selectStatesScript);
---

<FormGroup label="Static">
	<div class="form-control-plaintext">Input value</div>
</FormGroup>

<FormGroup label="Text">
	<input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder">
</FormGroup>

<FormGroup label="Password">
	<input type="text" class="form-control" name="example-password-input" placeholder="Input placeholder">
</FormGroup>

<FormGroup label="Disabled">
	<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled..." value="Well, she turned me into a newt." disabled>
</FormGroup>
<FormGroup label="Readonly">
	<input type="text" class="form-control" name="example-disabled-input" placeholder="Readonly..." value="Well, how'd you become king, then?" readonly>
</FormGroup>
<FormGroup label="Required" required>
	<input type="text" class="form-control" name="example-required-input" placeholder="Required...">
</FormGroup>
<FormGroup label="Textarea" description="56/100">
	<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>
</FormGroup>

<div class="mb-3">
	<div class="form-label">Select</div>
	<select class="form-select">
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
	</select>
</div>

<div class="mb-3">
	<div class="form-label">Select multiple</div>
	<select class="form-select" multiple>
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
	</select>
</div>

<div class="mb-3">
	<div class="form-label">Select multiple states</div>
	<select class="form-select" id="select-states" value="" multiple>
		{
			Object.entries(states).map(([code, { name, selected }]) => (
				<option value={code} selected={selected}>{name}</option>
			))
		}
	</select>
</div>

<FormGroup label="Input group">
	<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>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">
				Action
			</a>
			<a class="dropdown-item" href="#">
				Another action
			</a>
		</div>
		<input type="text" class="form-control" aria-label="Text input with dropdown button">
	</div>
</FormGroup>
<FormGroup label="Input group buttons">
	<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>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item" href="#">
				Action
			</a>
			<a class="dropdown-item" href="#">
				Another action
			</a>
		</div>
	</div>
</FormGroup>

<FormGroup label="Icon input">
	<div class="input-icon mb-3">
		<input type="text" value="" class="form-control" placeholder="Search…">
		<span class="input-icon-addon">
			<Icon name="search" />
		</span>
	</div>
	<div class="input-icon mb-3">
		<span class="input-icon-addon">
			<Icon name="user" />
		</span>
		<input type="text" value="" class="form-control" placeholder="Username">
	</div>
</FormGroup>

<FormGroup label="Loader input">
	<div class="input-icon mb-3">
		<input type="text" value="" class="form-control" placeholder="Loading…">
		<span class="input-icon-addon">
			<div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
		</span>
	</div>
	<div class="input-icon mb-3">
		<span class="input-icon-addon">
			<div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
		</span>
		<input type="text" value="" class="form-control" placeholder="Loading…">
	</div>
</FormGroup>
<FormGroup label="Separated inputs">
	<div class="row g-2">
		<div class="col">
			<input type="text" class="form-control" placeholder="Search for…">
		</div>
		<div class="col-auto">
			<a href="#" class="btn btn-icon" aria-label="Button">
				<Icon name="search" />
			</a>
		</div>
	</div>
</FormGroup>

<FormGroup label="Input with help icon">
	<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>
</FormGroup>
<InlineScript code={selectStatesScript} />