mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
73 lines
3.0 KiB
HTML
73 lines
3.0 KiB
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>
|