mirror of
https://github.com/tabler/tabler.git
synced 2026-10-13 21:57:00 +04:00
117 lines
4.1 KiB
Plaintext
117 lines
4.1 KiB
Plaintext
---
|
|
import Icon from '@ui/Icon.astro';
|
|
import FormGroup from '@ui/FormGroup.astro';
|
|
---
|
|
|
|
<FormGroup label="Form control rounded">
|
|
<input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
|
|
|
|
<div class="input-icon">
|
|
<input type="text" value="" class="form-control form-control-rounded" placeholder="Search…">
|
|
<span class="input-icon-addon">
|
|
<Icon name="search" />
|
|
</span>
|
|
</div>
|
|
</FormGroup>
|
|
|
|
<FormGroup label="Form control flush">
|
|
<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
|
|
</FormGroup>
|
|
|
|
<FormGroup label="Input group">
|
|
<div class="input-group mb-2">
|
|
<span class="input-group-text">@</span>
|
|
<input type="text" class="form-control" placeholder="username" autocomplete="off">
|
|
</div>
|
|
|
|
<div class="input-group mb-2">
|
|
<input type="text" class="form-control" placeholder="subdomain" autocomplete="off">
|
|
<span class="input-group-text">.tabler.io</span>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<span class="input-group-text">https://</span>
|
|
<input type="text" class="form-control" placeholder="subdomain" autocomplete="off">
|
|
<span class="input-group-text">.tabler.io</span>
|
|
</div>
|
|
</FormGroup>
|
|
|
|
<FormGroup label="Input with checkbox or radios">
|
|
<div class="input-group mb-2">
|
|
<span class="input-group-text">
|
|
<input class="form-check-input m-0" type="checkbox" checked>
|
|
</span>
|
|
<input type="text" class="form-control" autocomplete="off">
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" autocomplete="off">
|
|
<span class="input-group-text">
|
|
<input class="form-check-input m-0" type="radio" checked>
|
|
</span>
|
|
</div>
|
|
</FormGroup>
|
|
|
|
<FormGroup label="Input with prepended text">
|
|
<div class="input-group input-group-flat">
|
|
<span class="input-group-text">https://tabler.io/users/</span>
|
|
<input type="text" class="form-control ps-0" value="yourfancyusername" autocomplete="off">
|
|
</div>
|
|
</FormGroup>
|
|
|
|
<FormGroup label="Input with appended text">
|
|
<div class="input-group input-group-flat">
|
|
<input type="text" class="form-control text-end pe-0" value="yourfancydomain" autocomplete="off">
|
|
<span class="input-group-text">.tabler.io</span>
|
|
</div>
|
|
</FormGroup>
|
|
|
|
<FormGroup label="Input with appended link">
|
|
<div class="input-group input-group-flat">
|
|
<input type="password" class="form-control" value="ultrastrongpassword" autocomplete="off">
|
|
<span class="input-group-text">
|
|
<a href="#" class="input-group-link">Show password</a>
|
|
</span>
|
|
</div>
|
|
</FormGroup>
|
|
|
|
<FormGroup label="Input with appended kbd">
|
|
<div class="input-group input-group-flat">
|
|
<input type="text" class="form-control" autocomplete="off">
|
|
<span class="input-group-text">
|
|
<kbd>ctrl + K</kbd>
|
|
</span>
|
|
</div>
|
|
</FormGroup>
|
|
|
|
<FormGroup label="Input with appended icon links">
|
|
<div class="input-group input-group-flat">
|
|
<input type="text" class="form-control" autocomplete="off">
|
|
<span class="input-group-text">
|
|
<a href="#" class="link-secondary" title="Clear search" data-bs-toggle="tooltip"><Icon name="x" /></a>
|
|
<a href="#" class="link-secondary ms-2" title="Search settings" data-bs-toggle="tooltip"><Icon name="adjustments" /></a>
|
|
<a href="#" class="link-secondary ms-2 disabled" title="Add notification" data-bs-toggle="tooltip"><Icon name="bell" /></a>
|
|
</span>
|
|
</div>
|
|
</FormGroup>
|
|
|
|
<FormGroup label="Floating inputs">
|
|
<div class="form-floating mb-3">
|
|
<input type="email" class="form-control" id="floating-input" value="name@example.com" autocomplete="off">
|
|
<label for="floating-input">Email address</label>
|
|
</div>
|
|
<div class="form-floating mb-3">
|
|
<input type="password" class="form-control" id="floating-password" value="Password" autocomplete="off">
|
|
<label for="floating-password">Password</label>
|
|
</div>
|
|
<div class="form-floating">
|
|
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
|
|
<option selected>Open this select menu</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
<label for="floatingSelect">Select</label>
|
|
</div>
|
|
</FormGroup>
|