Loading...

Inputs Select

Default Select

The Default Select example demonstrates how to use the .form-select class to create a styled dropdown for selecting options easily.

Sizing

The Sizing example shows how to adjust the size of a select dropdown using Bootstrap's .form-select-lg and .form-select-sm classes for better UI adaptability.

Single Select

The Single Select example uses Choice.js to create a searchable dropdown. You can configure it using options like searchEnabled, placeholderValue, and removeItemButton.

Option Groups

The Option Groups example organizes related options within a select dropdown using the <optgroup> tag, improving readability and user experience.

Default Multiple Select

The Default Multiple Select example demonstrates how to use the .form-select class with the multiple attribute to allow users to select multiple options from a dropdown.

Multiple Select With Close Icon

The Multiple Select With Close Icon lets users select multiple options and remove them easily with a close icon. Use removeItemButton = "true" to enable this feature.

Multiple Select With Limit

The Multiple Select With Limit allows users to select multiple options up to a set limit. Use maxItemCount to define the selection limit.

Multiple Select With Option Groups

The Multiple Select With Option Groups organizes choices into categories, making selection easier. Groups help users find related options quickly.

Text Inputs

The Text Inputs allow users to enter and edit text in a form using the .form-control class for a clean and responsive design.

Unique Values Only, No Pasting

Users can enter only unique values and prevents pasting. Configure it using options like duplicateItemsAllowed: false and paste: false.

Email Address Only

The Email Address Only example ensures users enter a valid email format. Use pattern to validate input.

Preview Settings

Theme Layouts

Defines the admin panel's layout style, allowing you to choose from different design options.

Color Mode

Choose if app's appearance should be light or dark, or follow your computer's settings.

RTL Mode

Toggle between LTR and RTL layouts to support different language directions.

Preset Themes

Choose a preset theme from out theme library.

Sidebar Colors

Sets the sidebar color scheme. Options include light, dark, or gradient styles.

Navbar Positions Options

Sets the navbar position: sticky, static, or hidden.

Navbar Type Options

Sets the navbar style: default, dark, transparent, or glass.

Font Options

Sets the fonts for headings and body text.

Font Size Options

Sets the font size: sm, md, or lg.

Rounded Options

Sets the border radius size: xs, sm, md, lg, or xl.

Container Options

Defines the container style: fluid (full-width) or boxed (fixed width).

Loader Options

Sets the page loader visibility: hidden or visible.