The "Basic Select" component provides a simple dropdown menu for selecting options from a list. It's a fundamental UI element for collecting user input in the form of a single choice from multiple options.
HTMLOpenTag!-- BEGIN: Basic Select --HTMLCloseTag
HTMLOpenTagdivHTMLCloseTag
HTMLOpenTaglabelHTMLCloseTagBasicHTMLOpenTag/labelHTMLCloseTag
HTMLOpenTagdiv class="mt-2"HTMLCloseTag
HTMLOpenTagselect data-placeholder="Select your favorite actors" class="tom-select w-full"HTMLCloseTag
HTMLOpenTagoption value="1"HTMLCloseTagLeonardo DiCaprioHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="2"HTMLCloseTagJohnny DeepHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="3"HTMLCloseTagRobert Downey, JrHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="4"HTMLCloseTagSamuel L. JacksonHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="5"HTMLCloseTagMorgan FreemanHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag!-- END: Basic Select --HTMLCloseTag
HTMLOpenTag!-- BEGIN: Nested Select --HTMLCloseTag
HTMLOpenTagdiv class="mt-3"HTMLCloseTag
HTMLOpenTaglabelHTMLCloseTagNestedHTMLOpenTag/labelHTMLCloseTag
HTMLOpenTagdiv class="mt-2"HTMLCloseTag
HTMLOpenTagselect data-placeholder="Select your favorite actors" class="tom-select w-full"HTMLCloseTag
HTMLOpenTagoptgroup label="American Actors"HTMLCloseTag
HTMLOpenTagoption value="1"HTMLCloseTagLeonardo DiCaprioHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="2"HTMLCloseTagJohnny DeepHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="3"HTMLCloseTagRobert Downey, JrHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="4"HTMLCloseTagSamuel L. JacksonHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="5"HTMLCloseTagMorgan FreemanHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/optgroupHTMLCloseTag
HTMLOpenTagoptgroup label="American Actresses"HTMLCloseTag
HTMLOpenTagoption value="6"HTMLCloseTagScarlett JohanssonHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="7"HTMLCloseTagJessica AlbaHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="8"HTMLCloseTagJennifer LawrenceHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="9"HTMLCloseTagEmma StoneHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="10"HTMLCloseTagAngelina JolieHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/optgroupHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag!-- END: Nested Select --HTMLCloseTag
The "Basic Select" component provides a straightforward way to incorporate dropdown menus into your web application. By following the steps outlined above, you can easily create and customize dropdowns to collect user input or make selections from a list of options.
The "Multiple Select" component allows users to select multiple options from a list. It's a versatile UI element often used in scenarios where users need to make multiple selections, such as choosing multiple items from a list of available options.
HTMLOpenTagselect data-placeholder="Select your favorite actors" multiple="multiple" class="tom-select w-full"HTMLCloseTag
HTMLOpenTagoption
value="1"
selected
HTMLCloseTagLeonardo DiCaprioHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="2"HTMLCloseTagJohnny DeepHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption
value="3"
selected
HTMLCloseTagRobert Downey, JrHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="4"HTMLCloseTagSamuel L. JacksonHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="5"HTMLCloseTagMorgan FreemanHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
The "Multiple Select" component using TomSelect provides an easy and user-friendly way for users to make multiple selections from a list of options. It's highly customizable and can be adapted to various use cases in your web application.
The "TomSelect" component is a versatile select input library that allows you to create customized dropdowns and multi-select inputs. In this section, we'll explore how to enhance your "TomSelect" component by adding a header to the dropdown. This can be particularly useful when you want to provide context or group items within the dropdown.
HTMLOpenTagselect data-placeholder="Select your favorite actors" data-header="Actors" multiple="multiple" class="tom-select w-full"HTMLCloseTag
HTMLOpenTagoption value="1"HTMLCloseTagLeonardo DiCaprioHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption
value="2"
selected
HTMLCloseTagJohnny DeepHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption
value="3"
selected
HTMLCloseTagRobert Downey, JrHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="4"HTMLCloseTagSamuel L. JacksonHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption
value="5"
selected
HTMLCloseTagMorgan FreemanHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
By adding a header to your "TomSelect" component, you can provide valuable context and grouping for the options within the dropdown. This enhances the user experience and helps users make informed selections. Customize the header title to match your application's requirements and design. The "TomSelect" library offers various plugins to further extend the functionality of your select inputs.
The "TomSelect" component, combined with an input group, allows you to create a stylish and functional select input with a custom icon or character preceding it. This is useful when you want to provide additional context to the select input.
HTMLOpenTagdiv class="flex"HTMLCloseTag
HTMLOpenTagdiv class="flex"HTMLCloseTag
HTMLOpenTagdiv
class="z-30 -mr-1 flex w-10 items-center justify-center rounded-l border bg-slate-100 text-slate-600 dark:border-darkmode-800 dark:bg-darkmode-700 dark:text-slate-400"HTMLCloseTag
@
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagselect class="tom-select w-full"HTMLCloseTag
HTMLOpenTagoption value="1"HTMLCloseTagLeonardo DiCaprioHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="2"HTMLCloseTagJohnny DeepHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="3"HTMLCloseTagRobert Downey, JrHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="4"HTMLCloseTagSamuel L. JacksonHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="5"HTMLCloseTagMorgan FreemanHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
Combining the "TomSelect" component with an input group allows you to create a select input with a personalized icon or character preceding it. This feature enhances the user interface and provides a unique visual representation for your select input, making it more user-friendly and visually appealing.
The "TomSelect" component can be easily configured to be disabled, preventing users from interacting with it. This feature is useful when you want to display a select input that should not be altered or selected by the user.
HTMLOpenTagselect disabled="disabled" class="tom-select w-full"HTMLCloseTag
HTMLOpenTagoption value="1"HTMLCloseTagLeonardo DiCaprioHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="2"HTMLCloseTagJohnny DeepHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="3"HTMLCloseTagRobert Downey, JrHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="4"HTMLCloseTagSamuel L. JacksonHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="5"HTMLCloseTagMorgan FreemanHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
The "TomSelect" component can be easily disabled by setting the disabled attribute to true, making it unselectable and preventing user interaction. This feature is particularly useful when you want to display a select input that is for informational purposes only and should not be altered by users. You can customize the appearance and content of the disabled "TomSelect" to fit your application's style and layout. Incorporate it into your application as needed to create a user-friendly and accessible interface.
The "TomSelect" component allows you to create select inputs with disabled options. Disabled options are elements within the dropdown menu that cannot be selected by users. This can be helpful for providing additional context or indicating unavailable choices within a select input.
HTMLOpenTagselect class="tom-select w-full"HTMLCloseTag
HTMLOpenTagoption
value="1"
disabled
HTMLCloseTagLeonardo DiCaprioHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="2"HTMLCloseTagJohnny DeepHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="3"HTMLCloseTagRobert Downey, JrHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption
value="4"
disabled
HTMLCloseTagSamuel L. JacksonHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTagoption value="5"HTMLCloseTagMorgan FreemanHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
The "TomSelect" component allows you to include disabled options within a select input. These disabled options are displayed in the dropdown menu but cannot be selected by users. You can use disabled options to provide additional information or indicate choices that are currently unavailable.
In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.
Below is a list of props that can be passed to the component:
| Prop | Type | Description |
|---|---|---|
| `value` | `string` or `string[]` | The selected value(s) in the TomSelect component. |
| `onOptionAdd` | `(value: string) => void` | A callback function that is called when an option is added. |
| `onChange` | `(value: `string` or `string[]`) => void` | A callback function that is called when the selected value(s) change. |
| `options` | `TomSettings` | TomSelect configuration options. |
| `getRef` | `(el: TomSelectElement) => void` | A function that receives a reference to the TomSelect input element. |