mirror of
https://github.com/tabler/tabler.git
synced 2026-08-05 01:44:41 +04:00
Migrate preview and docs packages from Eleventy to Astro (#2694)
Co-authored-by: Bartek <xbartoszdobija@gmail.com>
This commit is contained in:
Paweł Kuna
GitHub
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Color check
|
||||
summary: The color check is a great way to make your form more user-friendly and engaging. You can use the color check to create a visually appealing form that will help users make decisions quickly and easily.
|
||||
description: Enhance forms with color checks.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import InputColor from '@shared/components/parts/form/InputColor.astro'
|
||||
|
||||
Your input controls can come in a variety of colors, depending on your preferences. See the [full list of available colors](/ui/base/colors) for more details.
|
||||
|
||||
```html
|
||||
<label class="form-colorinput">
|
||||
<input name="..." type="radio" value="..." class="form-colorinput-input" />
|
||||
<span class="form-colorinput-color bg-lime"></span>
|
||||
</label>
|
||||
```
|
||||
|
||||
There is also an example of a color input:
|
||||
|
||||
<Example>
|
||||
<InputColor type="checkbox" />
|
||||
</Example>
|
||||
|
||||
If you need to select only one color, you can use the radio input type:
|
||||
|
||||
<Example>
|
||||
<InputColor name="color-rounded" rounded={true} />
|
||||
</Example>
|
||||
|
||||
## Input color picker
|
||||
|
||||
Add an color picker to your form to let users customize it according to their preferences.
|
||||
|
||||
<Example>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Color picker</label>
|
||||
<input
|
||||
type="color"
|
||||
class="form-control form-control-color"
|
||||
value="#066fd1"
|
||||
title="Choose your color"
|
||||
/>
|
||||
</div>
|
||||
</Example>
|
||||
@@ -0,0 +1,166 @@
|
||||
---
|
||||
title: Form elements
|
||||
summary: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
|
||||
bootstrapLink: components/forms/
|
||||
docs-libs: nouislider
|
||||
description: Design user-friendly and effective forms.
|
||||
order: 1
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Classic inputs
|
||||
|
||||
Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form. Add the `form-control` class to style your input controls.
|
||||
|
||||
```html
|
||||
<input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder" />
|
||||
```
|
||||
|
||||
All variants of the input control are available in the examples below:
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Text</label> <input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder" /> </div> <div class="mb-3"> <label class="form-label">Password</label> <input type="password" class="form-control" name="example-password-input" placeholder="Input placeholder" /> </div> <div class="mb-3"> <label class="form-label">Disabled</label> <input type="text" class="form-control" name="example-password-input" placeholder="Input placeholder" disabled /> </div> <div class="mb-3"> <label class="form-label">Readonly</label> <input type="text" class="form-control" name="example-password-input" value="Readolny value" readonly /> </div>
|
||||
</Example>
|
||||
|
||||
## Form control rounded
|
||||
|
||||
Use the `form-control-rounded` class if you prefer form controls with rounded corners.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Form control rounded</label> <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"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="10" cy="10" r="7" /> <line x1="21" y1="21" x2="15" y2="15" /> </svg> </span> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Form control flush
|
||||
|
||||
You can remove borders from your form control by adding the `form-control-flush` class.
|
||||
|
||||
<Example>
|
||||
<label class="form-label">Form control flush</label> <input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text.." />
|
||||
</Example>
|
||||
|
||||
## Input with icon
|
||||
|
||||
Add icons to your input controls to suggest users what they should enter or inform them of the current state of a form element.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Icon input</label> <div class="input-icon mb-3"> <input type="text" value="" class="form-control" placeholder="Search…" /> <span class="input-icon-addon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="10" cy="10" r="7" /> <line x1="21" y1="21" x2="15" y2="15" /> </svg> </span> </div> <div class="input-icon mb-3"> <span class="input-icon-addon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="7" r="4" /> <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /> </svg> </span> <input type="text" value="" class="form-control" placeholder="Username" /> </div> </div> <div class="mb-3"> <label class="form-label">Loader input</label> <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> </div>
|
||||
</Example>
|
||||
|
||||
## Separated inputs
|
||||
|
||||
Include an additional element in your input section, such as a button which can be used to submit the information entered in the input control.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Separated inputs</label> <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"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="10" cy="10" r="7" /> <line x1="21" y1="21" x2="15" y2="15" /> </svg> </a> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Textarea and select
|
||||
|
||||
Use a multi-line text input control to enable users to enter longer pieces of text. The control will automatically adjust to the length of the text entered.
|
||||
|
||||
Add one of the available selects - either a dropdown or a multiple choice select - to let users choose from a predefined set of options.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Textarea</label> <textarea class="form-control" name="example-textarea" placeholder="Textarea placeholder" ></textarea> </div> <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>
|
||||
</Example>
|
||||
|
||||
## Input size
|
||||
|
||||
Choose the size of an input control that will go well with your form design. Besides the default size, you can also use small and large input controls.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Input sizing</label> <input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg" /> <input class="form-control mb-2" type="text" placeholder="Default input" /> <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" /> </div>
|
||||
</Example>
|
||||
|
||||
## Datalists
|
||||
|
||||
Use the `datalist` element to add an autocomplete feature to your input control. The list of available options will display once a user starts to type and will make it quicker to complete form sections.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Datalist example</label> <input class="form-control" list="datalistOptions" placeholder="Type to search..." /> <datalist id="datalistOptions"> <option value="Aruba" /> <option value="Afghanistan" /> <option value="Angola" /> <option value="Anguilla" /> <option value="Albania" /> <option value="Andorra" /> <option value="United Arab Emirates" /> <option value="Argentina" /> <option value="Armenia" /> <option value="American Samoa" /> </datalist> </div>
|
||||
</Example>
|
||||
|
||||
## Toggle switches
|
||||
|
||||
Use toggle switches for the elements of your form which require choosing between two opposing states.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <div class="form-label">Toggle switches</div> <label class="form-check form-switch"> <input class="form-check-input" type="checkbox" checked /> <span class="form-check-label">Option 1</span> </label> <label class="form-check form-switch"> <input class="form-check-input" type="checkbox" /> <span class="form-check-label">Option 2</span> </label> <label class="form-check form-switch"> <input class="form-check-input" type="checkbox" /> <span class="form-check-label">Option 3</span> </label> </div> <div class="mb-3"> <div class="form-label">Single switch</div> <label class="form-check form-switch"> <input class="form-check-input" type="checkbox" /> <span class="form-check-label">I agree with terms and conditions</span> </label> </div>
|
||||
</Example>
|
||||
|
||||
## Radios
|
||||
|
||||
Use radio buttons for the parts of your form which require users to choose one option from a set of two or more mutually exclusive options.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <div class="form-label">Radios</div> <div> <label class="form-check"> <input class="form-check-input" type="radio" name="radios" checked /> <span class="form-check-label">Option 1</span> </label> <label class="form-check"> <input class="form-check-input" type="radio" name="radios" /> <span class="form-check-label">Option 2</span> </label> <label class="form-check"> <input class="form-check-input" type="radio" disabled /> <span class="form-check-label">Option 3</span> </label> <label class="form-check"> <input class="form-check-input" type="radio" checked disabled /> <span class="form-check-label">Option 4</span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <div class="form-label">Inline Radios</div> <div> <label class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="radios-inline" checked /> <span class="form-check-label">Option 1</span> </label> <label class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="radios-inline" /> <span class="form-check-label">Option 2</span> </label> <label class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="radios-inline" disabled /> <span class="form-check-label">Option 3</span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Checkboxes
|
||||
|
||||
Use checkboxes if you want to allow users to select more than one option from a set of predefined options or to turn an option on or off.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <div class="form-label">Checkboxes</div> <div> <label class="form-check"> <input class="form-check-input" type="checkbox" /> <span class="form-check-label">Checkbox input</span> </label> <label class="form-check"> <input class="form-check-input" type="checkbox" disabled /> <span class="form-check-label">Disabled checkbox input</span> </label> <label class="form-check"> <input class="form-check-input" type="checkbox" checked /> <span class="form-check-label">Checked checkbox input</span> </label> </div> </div> <div class="mb-3"> <div class="form-label">Inline Checkboxes</div> <div> <label class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" /> <span class="form-check-label">Option 1</span> </label> <label class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" disabled /> <span class="form-check-label">Option 2</span> </label> <label class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" checked /> <span class="form-check-label">Option 3</span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Range input
|
||||
|
||||
Add a range slider to make it possible for users to set a value or range, such as a price range or a time frame.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Range input</label> <input type="range" class="form-range mb-2" value="40" min="0" max="100" step="10" /> <div class="form-range mb-2 text-green" id="range-color"></div> </div> <script>{`document.addEventListener("DOMContentLoaded", function () { window.noUiSlider && noUiSlider.create(document.getElementById("range-color"), { start: 40, connect: [true, false], step: 10, range: { min: 0, max: 100, }, }); });`}</script>
|
||||
</Example>
|
||||
|
||||
## Input group
|
||||
|
||||
Create a group of input controls and place add-ons on either side of an input.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Input group</label> <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> </div>
|
||||
</Example>
|
||||
|
||||
## Input with checkboxes or radios
|
||||
|
||||
Add checkboxes or radio buttons on either side of your input control.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Input with checkbox or radios</label> <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> </div>
|
||||
</Example>
|
||||
|
||||
## Input with prepended or appended text
|
||||
|
||||
Add text to your input control, either before or after the text which is to be entered by a user.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Input with prepended text</label> <div class="input-group input-group-flat mb-2"> <span class="input-group-text"> https://tabler.io/users/ </span> <input type="text" class="form-control ps-0" value="yourfancyusername" autocomplete="off" /> </div> <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> </div>
|
||||
</Example>
|
||||
|
||||
## Input with appended link
|
||||
|
||||
Include a link in your input control to add a clickable element within the control.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Input with appended link</label> <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> </div>
|
||||
</Example>
|
||||
|
||||
## Input with appended kbd
|
||||
|
||||
Include a `<kbd>` in your input control to add a shortcut hint to the control.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Input with appended kbd</label> <div class="input-group input-group-flat"> <input type="password" class="form-control" value="ultrastrongpassword" autocomplete="off" /> <span class="input-group-text"> <kbd>ctrl + K</kbd> </span> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Input with appended icon links
|
||||
|
||||
Add an icon link which you want to display at the end of your input control to visually represent actions which a user can take.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Input with appended icon links</label> <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"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /> </svg> </a> <a href="#" class="link-secondary ms-2" title="Search settings" data-bs-toggle="tooltip"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="6" cy="10" r="2" /> <line x1="6" y1="4" x2="6" y2="8" /> <line x1="6" y1="12" x2="6" y2="20" /> <circle cx="12" cy="16" r="2" /> <line x1="12" y1="4" x2="12" y2="14" /> <line x1="12" y1="18" x2="12" y2="20" /> <circle cx="18" cy="7" r="2" /> <line x1="18" y1="4" x2="18" y2="5" /> <line x1="18" y1="9" x2="18" y2="20" /> </svg> </a> <a href="#" class="link-secondary ms-2 disabled" title="Add notification" data-bs-toggle="tooltip" > <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /> <path d="M9 17v1a3 3 0 0 0 6 0v-1" /> </svg> </a> </span> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Form fieldset
|
||||
summary: By grouping form elements together with the fieldset element, you can improve the organization and accessibility of your forms, making it easier for users to understand the purpose of each input and provide accurate information.
|
||||
description: Group form elements for clarity.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
Group parts of your form to make it well-structured and clearer for users, using the `fieldset` element.
|
||||
|
||||
<Example>
|
||||
<fieldset class="form-fieldset"> <div class="mb-3"> <label class="form-label required">Full name</label> <input type="text" class="form-control" autocomplete="off" /> </div> <div class="mb-3"> <label class="form-label required">Company</label> <input type="text" class="form-control" autocomplete="off" /> </div> <div class="mb-3"> <label class="form-label required">Email</label> <input type="email" class="form-control" autocomplete="off" /> </div> <div class="mb-3"> <label class="form-label">Phone number</label> <input type="tel" class="form-control" autocomplete="off" /> </div> <label class="form-check"> <input type="checkbox" class="form-check-input" /> <span class="form-check-label required">I agree to the Terms & Conditions</span> </label> </fieldset>
|
||||
</Example>
|
||||
@@ -0,0 +1,58 @@
|
||||
---
|
||||
title: Form helpers
|
||||
summary: Use form helpers to provide additional information about a form element. You can use input help, required field, form hint, and additional info inside the label.
|
||||
description: Provide additional guidance in forms.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Input help
|
||||
|
||||
Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper. To add an input helper, use the `.form-help` class.
|
||||
|
||||
```html
|
||||
<span
|
||||
class="form-help"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-placement="top"
|
||||
data-bs-html="true"
|
||||
data-bs-content="<p>...</p>"
|
||||
>?</span
|
||||
>
|
||||
```
|
||||
|
||||
Look at the example below to see how the input help works:
|
||||
|
||||
<Example>
|
||||
<div> <label class="form-label"> ZIP Code <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" 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>" >?</span > </label> <input type="text" class="form-control" placeholder="Your ZIP Code" /> </div>
|
||||
</Example>
|
||||
|
||||
## Required field
|
||||
|
||||
Use the `.required` class to indicate that a field is required. It will add a red asterisk to the label.
|
||||
|
||||
<Example>
|
||||
<div> <label class="form-label required">Required</label> <input type="text" class="form-control" name="..." placeholder="Required..." /> </div>
|
||||
</Example>
|
||||
|
||||
## Form hint
|
||||
|
||||
Use a form hint to provide users with additional information about a form element. The text will appear below the input field. To add a form hint, use the `.form-hint` class.
|
||||
|
||||
```html
|
||||
<div class="form-hint">We'll never share your email with anyone else.</div>
|
||||
```
|
||||
|
||||
Look at the example below to see how the form hint works:
|
||||
|
||||
<Example>
|
||||
<div> <label class="form-label">Email address</label> <input type="email" class="form-control" placeholder="Enter your email address" /> <div class="form-hint">We'll never share your email with anyone else.</div> </div>
|
||||
</Example>
|
||||
|
||||
## Additional info inside label
|
||||
|
||||
Use the `.form-label-description` class to add additional information to the label. The text will appear next to the label. You can use it to add for example a character counter.
|
||||
|
||||
<Example>
|
||||
<div> <label class="form-label">Textarea <span class="form-label-description">56/100</span> </label> <textarea class="form-control" name="" rows="3" placeholder="Content.."></textarea> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Image check
|
||||
summary: The image check is a great way to make your form more user-friendly and engaging. You can use the image check to create a visually appealing form that will help users make decisions quickly and easily.
|
||||
description: Add visual appeal to forms with images.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
To build an image check, you need to use the `.form-imagecheck` class and the `.form-imagecheck-input` class for the input element. You can also use the `.form-imagecheck-figure` class to display the custom checkbox and the `.form-imagecheck-image` class to style the image itself.
|
||||
|
||||
```html
|
||||
<label class="form-imagecheck">
|
||||
<input name="..." type="checkbox" value="" class="form-imagecheck-input" checked />
|
||||
<span class="form-imagecheck-figure">
|
||||
<img src="..." alt="" class="form-imagecheck-image" />
|
||||
</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
Look at the examples below to see how the image check works:
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Image Check</label> <div class="row g-2"> <div class="col-3"> <label class="form-imagecheck"> <input name="image" type="checkbox" value="1" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <img src="/static/photos/everything-you-need-to-work-from-your-bed-2.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> <div class="col-3"> <label class="form-imagecheck"> <input name="image" type="checkbox" value="2" class="form-imagecheck-input" checked /> <span class="form-imagecheck-figure"> <img src="/static/photos/color-palette-guide-sample-colors-catalog-.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> <div class="col-3"> <label class="form-imagecheck"> <input name="image" type="checkbox" value="3" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <img src="/static/photos/woman-read-book-and-drink-coffee-2.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> <div class="col-3"> <label class="form-imagecheck"> <input name="image" type="checkbox" value="4" class="form-imagecheck-input" checked /> <span class="form-imagecheck-figure"> <img src="/static/photos/stylish-workspace-with-macbook-pro-2.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Radio buttons
|
||||
|
||||
If you want to use the image check as a radio button, you can change the input type to `radio`.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Image Check Radio</label> <div class="row g-2"> <div class="col-3"> <label class="form-imagecheck mb-2"> <input name="image" type="radio" value="1" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <img src="/static/photos/woman-drinking-hot-tea-in-her-home-office.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> <div class="col-3"> <label class="form-imagecheck mb-2"> <input name="image" type="radio" value="2" class="form-imagecheck-input" checked /> <span class="form-imagecheck-figure"> <img src="/static/photos/young-woman-sitting-on-the-sofa-and-working-on-her-laptop-3.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> <div class="col-3"> <label class="form-imagecheck mb-2"> <input name="image" type="radio" value="3" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <img src="/static/photos/beautiful-blonde-woman-relaxing-with-a-can-of-coke-on-a-tree-stump-by-the-beach.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> <div class="col-3"> <label class="form-imagecheck mb-2"> <input name="image" type="radio" value="4" class="form-imagecheck-input" checked /> <span class="form-imagecheck-figure"> <img src="/static/photos/book-on-the-grass.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Avatars
|
||||
|
||||
If you want to use the image check with avatars, you can use an [avatar component](/ui/components/avatar) instead of an image.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Person Check</label> <div class="row g-2"> <div class="col-auto"> <label class="form-imagecheck mb-2"> <input name="image" type="checkbox" value="1" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <span class="form-imagecheck-image"> <span class="avatar avatar-xl" style="background-image: url(/static/avatars/057f.jpg)" ></span> </span> </span> </label> </div> <div class="col-auto"> <label class="form-imagecheck mb-2"> <input name="image" type="checkbox" value="2" class="form-imagecheck-input" checked /> <span class="form-imagecheck-figure"> <span class="form-imagecheck-image"> <span class="avatar avatar-xl">HS</span> </span> </span> </label> </div> <div class="col-auto"> <label class="form-imagecheck mb-2"> <input name="image" type="checkbox" value="3" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <span class="form-imagecheck-image"> <span class="avatar avatar-xl" style="background-image: url(/static/avatars/062m.jpg)" ></span> </span> </span> </label> </div> <div class="col-auto"> <label class="form-imagecheck mb-2"> <input name="image" type="checkbox" value="4" class="form-imagecheck-input" checked /> <span class="form-imagecheck-figure"> <span class="form-imagecheck-image"> <span class="avatar avatar-xl" style="background-image: url(/static/avatars/070m.jpg)" ></span> </span> </span> </label> </div> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Input mask
|
||||
summary: An input mask is used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
|
||||
description: Clarify input formats for users.
|
||||
docs-libs: imask
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
## Installation
|
||||
|
||||
To be able to use the input mask in your application you will need to install the imask dependency. You can do this by running the following command:
|
||||
|
||||
<TabsPackage name="imask" />
|
||||
|
||||
And import or require:
|
||||
|
||||
```javascript
|
||||
import IMask from 'imask'
|
||||
```
|
||||
|
||||
You can also use the CDN link to include the script in your project:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/imask"></script>
|
||||
```
|
||||
|
||||
If you struggle with the installation, you can find more information in the [IMask documentation](https://imask.js.org/guide.html#installation).
|
||||
|
||||
## Default markup
|
||||
|
||||
Use an input mask in the fields where users have to enter their phone number, to make the formatting rules clear and help them avoid confusion.
|
||||
|
||||
To create an input mask, add the `data-mask` attribute to the input element:
|
||||
|
||||
```html
|
||||
<input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" placeholder="(00) 0000-0000" autocomplete="off" />
|
||||
```
|
||||
|
||||
Look at the example below to see how the input mask works:
|
||||
|
||||
<Example>
|
||||
<label class="form-label">Telephone mask</label>
|
||||
<input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" data-mask-visible="true" placeholder="(00) 0000-0000" autocomplete="off" />
|
||||
</Example>
|
||||
|
||||
## More examples
|
||||
|
||||
If you need more examples of input masks, you can find them in the [IMask documentation](https://imask.js.org/guide.html#masked-input).
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: Form selectgroup
|
||||
summary: Use selectgroup to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectgroup with a label, use icons only or icons with labels. Alternatively, you can use pill selectgroup if they go well with your design.
|
||||
description: Improve form UX with select groups.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Simple selectgroup
|
||||
|
||||
To create a simple selectgroup, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label.
|
||||
|
||||
```html
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="checkbox" name="name" value="..." class="form-selectgroup-input" checked />
|
||||
<span class="form-selectgroup-label">...</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
Look at the example below to see how the simple selectgroup works:
|
||||
|
||||
<Example centered>
|
||||
<div> <div class="form-selectgroup"> <label class="form-selectgroup-item"> <input type="radio" name="name" value="HTML" class="form-selectgroup-input" checked /> <span class="form-selectgroup-label">HTML</span> </label> <label class="form-selectgroup-item"> <input type="radio" name="name" value="CSS" class="form-selectgroup-input" /> <span class="form-selectgroup-label">CSS</span> </label> <label class="form-selectgroup-item"> <input type="radio" name="name" value="PHP" class="form-selectgroup-input" /> <span class="form-selectgroup-label">PHP</span> </label> <label class="form-selectgroup-item"> <input type="radio" name="name" value="JavaScript" class="form-selectgroup-input" /> <span class="form-selectgroup-label">JavaScript</span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Multiple choices
|
||||
|
||||
You can also create a selectgroup with multiple choices. To do this, change the `type` attribute of the input element to `checkbox`.
|
||||
|
||||
```html
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="checkbox" name="name" value="..." class="form-selectgroup-input" checked />
|
||||
<span class="form-selectgroup-label">...</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
Look at the example below to see how the multiple choices selectgroup works:
|
||||
|
||||
<Example centered>
|
||||
<div> <div class="form-selectgroup"> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked /> <span class="form-selectgroup-label">HTML</span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" /> <span class="form-selectgroup-label">CSS</span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" /> <span class="form-selectgroup-label">PHP</span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" /> <span class="form-selectgroup-label">JavaScript</span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Icon input
|
||||
|
||||
To create an icon input, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label. You can use the `.icon` class to style the icon.
|
||||
|
||||
```html
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked />
|
||||
<span class="form-selectgroup-label">
|
||||
<svg class="icon" width="24" height="24">...</svg>
|
||||
</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
We recommend you use Tabler Icons for the best experience. You can find 123 free icons in the [Tabler Icons](https://tabler-icons.io/) library. Just copy the SVG code and paste it into your project.
|
||||
|
||||
<Example centered>
|
||||
<div class="mb-3"> <label class="form-label">Icon input</label> <div class="form-selectgroup"> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="4" /> <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /> </svg> </span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="moon" class="form-selectgroup-input" /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /> </svg> </span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input" /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7" /> <path d="M11 13v2m0 3v2m4 -5v2m0 3v2" /> </svg> </span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="cloud" class="form-selectgroup-input" /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 .996c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-11.878" /> </svg> </span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="Other" class="form-selectgroup-input" /> <span class="form-selectgroup-label">Other</span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
You can also add text to the element. Look at the example below to see how it works:
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Selectgroup with icons and text</label> <div class="form-selectgroup"> <label class="form-selectgroup-item"> <input type="radio" name="icons" value="home" class="form-selectgroup-input" checked /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <polyline points="5 12 3 12 12 3 21 12 19 12" /> <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /> <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /> </svg> Home </span> </label> <label class="form-selectgroup-item"> <input type="radio" name="icons" value="user" class="form-selectgroup-input" /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="7" r="4" /> <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /> </svg> User </span> </label> <label class="form-selectgroup-item"> <input type="radio" name="icons" value="circle" class="form-selectgroup-input" /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> </svg> Circle </span> </label> <label class="form-selectgroup-item"> <input type="radio" name="icons" value="square" class="form-selectgroup-input" /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <rect x="4" y="4" width="16" height="16" rx="2" /> </svg> Square </span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Pill selectgroup
|
||||
|
||||
If you want to use pill selectgroup, use the `.form-selectgroup-pills` class. All the other classes are the same as in the simple selectgroup.
|
||||
|
||||
```html
|
||||
<div class="form-selectgroup form-selectgroup-pills">...</div>
|
||||
```
|
||||
|
||||
Look at the example below to see how the pill selectgroup works:
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Different style</label> <div class="form-selectgroup form-selectgroup-pills"> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked /> <span class="form-selectgroup-label">HTML</span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" /> <span class="form-selectgroup-label">CSS</span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" /> <span class="form-selectgroup-label">PHP</span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" /> <span class="form-selectgroup-label">JavaScript</span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Advanced selectboxes
|
||||
|
||||
Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons if you want users to select only one option, or with checkboxes if they are allowed to choose multiple options.
|
||||
|
||||
<Example column>
|
||||
<div class="mb-3"> <label class="form-label">Payment method</label> <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column"> <label class="form-selectgroup-item flex-fill"> <input type="radio" name="form-payment" value="visa" class="form-selectgroup-input" /> <div class="form-selectgroup-label d-flex align-items-center p-3"> <div class="me-3"> <span class="form-selectgroup-check"></span> </div> <div> <span class="payment payment-provider-visa payment-xs me-2"></span> ending in <strong>7998</strong> </div> </div> </label> <label class="form-selectgroup-item flex-fill"> <input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked /> <div class="form-selectgroup-label d-flex align-items-center p-3"> <div class="me-3"> <span class="form-selectgroup-check"></span> </div> <div> <span class="payment payment-provider-mastercard payment-xs me-2"></span> ending in <strong>2807</strong> </div> </div> </label> <label class="form-selectgroup-item flex-fill"> <input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input" /> <div class="form-selectgroup-label d-flex align-items-center p-3"> <div class="me-3"> <span class="form-selectgroup-check"></span> </div> <div> <span class="payment payment-provider-paypal payment-xs me-2"></span> </div> </div> </label> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: Validation states
|
||||
summary: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
|
||||
description: Indicate valid or invalid inputs.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Validation states
|
||||
|
||||
To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
|
||||
|
||||
To apply the validation state to the form control, use the `.is-valid` and `.is-invalid` classes.
|
||||
|
||||
<Example>
|
||||
<input type="text" class="form-control is-valid" placeholder="Valid State..." /> <input type="text" class="form-control is-invalid" placeholder="Invalid State..." />
|
||||
</Example>
|
||||
|
||||
## Validation feedback
|
||||
|
||||
To provide users with additional information about the validation state, you can use the `.valid-feedback` and `.invalid-feedback` classes.
|
||||
|
||||
<Example>
|
||||
<div> <label class="form-label required">City</label> <input type="text" class="form-control is-invalid" required /> <div class="invalid-feedback">Please provide a valid city.</div> </div>
|
||||
</Example>
|
||||
|
||||
You can also use the `.valid-feedback` to provide users with positive feedback.
|
||||
|
||||
<Example>
|
||||
<div> <label class="form-label required">City</label> <input type="text" class="form-control is-valid" value="Warsaw" /> <div class="valid-feedback">Looks good!</div> </div>
|
||||
</Example>
|
||||
|
||||
## Subtle validation states
|
||||
|
||||
If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and refrain from using colored control frames and the validation feedback.
|
||||
|
||||
To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes.
|
||||
|
||||
<Example>
|
||||
<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." /> <input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..." />
|
||||
</Example>
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Forms
|
||||
order: 5
|
||||
description: Build and manage web forms.
|
||||
summary: The forms section provides a collection of components and tools for creating user-friendly and accessible forms, enhancing user interaction and improving data collection.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
Reference in New Issue
Block a user