dropdown
|
relative outline-none min-w-[100px] m-0 scale-y-[0.8]
opacity-0 bg-white
shadow-[0_2px_5px_0_rgba(0,0,0,0.16),_0_2px_10px_0_rgba(0,0,0,0.12)]
transition duration-200 motion-reduce:transition-none
data-[te-select-open]:scale-100
data-[te-select-open]:opacity-100 dark:bg-zinc-700
|
Sets transition, size and appearance styles for select
dropdown.
|
formCheckInput
|
relative float-left mt-[3px] mr-2 h-4 w-4 cursor-pointer
appearance-none rounded-sm border border-gray-300 bg-white
bg-contain bg-center bg-no-repeat align-top transition
duration-200 motion-reduce:transition-none
checked:border-blue-600 checked:bg-blue-600
checked:after:absolute checked:after:ml-[5px]
checked:after:mt-px checked:after:block
checked:after:h-[9px] checked:after:w-[5px]
checked:after:rotate-45 checked:after:border-2
checked:after:border-t-0 checked:after:border-l-0
checked:after:border-solid checked:after:border-white
checked:after:bg-transparent checked:after:content-['']
focus:outline-none
group-data-[te-select-option-text-ref]:mr-2.5
dark:bg-zinc-700 dark:checked:bg-blue-500
|
Sets styles for checkbox input inside the select dropdown.
|
formOutline
|
relative
|
Sets position attribute form select input wrapper.
|
initialized
|
hidden
|
Hides original select input
|
inputGroup
|
flex items-center whitespace-nowrap p-2.5 text-center
text-base font-normal leading-[1.6] text-gray-700
dark:bg-zinc-800 dark:text-gray-200
dark:placeholder:text-gray-200
|
Sets size, position and other styles for input group
wrapper.
|
noResult
|
flex items-center px-4
|
Sets position and padding of no-result information when
filtering options.
|
optionsList
|
list-none m-0 p-0
|
Sets margins and paddings for option list.
|
optionsWrapper
|
overflow-y-auto
|
Sets overflow for options wrapper element.
|
optionsWrapperScrollbar
|
[&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar]:h-1
[&::-webkit-scrollbar-button]:block
[&::-webkit-scrollbar-button]:h-0
[&::-webkit-scrollbar-button]:bg-transparent
[&::-webkit-scrollbar-track-piece]:bg-transparent
[&::-webkit-scrollbar-track-piece]:rounded-none
[&::-webkit-scrollbar-track-piece]:
[&::-webkit-scrollbar-track-piece]:rounded-l
[&::-webkit-scrollbar-thumb]:h-[50px]
[&::-webkit-scrollbar-thumb]:bg-[#999]
[&::-webkit-scrollbar-thumb]:rounded
|
Changes the default scrollbar appearance.
|
selectArrow
|
absolute right-3 text-[0.8rem] cursor-pointer
peer-focus:text-primary
peer-data-[te-input-focused]:text-primary
group-data-[te-was-validated]/validation:peer-valid:text-green-600
group-data-[te-was-validated]/validation:peer-invalid:text-[rgb(220,76,100)]
w-5 h-5
|
Sets styles for select input arrow.
|
selectArrowWhite
|
text-gray-50 peer-focus:!text-white
peer-data-[te-input-focused]:!text-white
|
Sets arrow color for
selectFormWhite attribute.
|
selectArrowDefault
|
top-2
|
Sets arrows top position if select size is default
|
selectArrowLg
|
top-[13px]
|
Sets arrows top position if select size is set to large
|
selectArrowSm
|
top-1
|
Sets arrows top position if select size is set to small
|
selectClearBtn
|
absolute top-2 right-9 text-black cursor-pointer
focus:text-blue-600 outline-none dark:text-gray-200
|
Sets position, size and other styles for clear button.
|
selectClearBtnWhite
|
!text-gray-50
|
Sets clear button's color for
selectFormWhite attribute.
|
selectClearBtnDefault
|
top-2 text-base
|
Sets arrows top position and font size if select size is set
to default
|
selectClearBtnLg
|
top-[11px] text-base
|
Sets arrows top position and font size if select size is set
to large.
|
selectClearBtnSm
|
top-1 text-[0.8rem]
|
Sets arrows top position and font size if select size is set
to small.
|
selectDropdownContainer
|
z-[1070]
|
Sets index value for select's dropdown container.
|
selectFakeValue
|
transform-none hidden data-[te-input-state-active]:block
|
Sets styles for fake value.
|
selectFilterInput
|
relative m-0 block w-full min-w-0 flex-auto rounded border
border-solid border-gray-300 bg-transparent bg-clip-padding
px-3 py-1.5 text-base font-normal text-gray-700 transition
duration-300 ease-in-out motion-reduce:transition-none
focus:border-blue-600 focus:text-gray-700
focus:shadow-te-blue focus:outline-none dark:text-gray-200
dark:placeholder:text-gray-200
|
Sets styles for search input appearance.
|
selectInput
|
peer block min-h-[auto] w-full rounded border-0
bg-transparent outline-none transition-all duration-200
ease-linear focus:placeholder:opacity-100
data-[te-input-state-active]:placeholder:opacity-100
motion-reduce:transition-none dark:text-gray-200
dark:placeholder:text-gray-200
[&:not([data-te-input-placeholder-active])]:placeholder:opacity-0
cursor-pointer data-[te-input-disabled]:bg-[#e9ecef]
data-[te-input-disabled]:cursor-default
group-data-[te-was-validated]/validation:mb-4
dark:data-[te-input-disabled]:bg-zinc-600
|
Sets styles for select inputs.
|
selectInputWhite
|
!text-gray-50
|
Sets inputs font color for
selectFormWhite attribute.
|
selectInputSizeDefault
|
py-[0.32rem] px-3 leading-[1.6]
|
Sets padding and line height for default input size.
|
selectInputSizeLg
|
py-[0.32rem] px-3 leading-[2.15]
|
Sets padding and line height for large input size.
|
selectInputSizeSm
|
py-[0.33rem] px-3 text-xs leading-[1.5]
|
Sets font size, padding and line height for small input
size.
|
selectLabel
|
pointer-events-none absolute top-0 left-3 mb-0 max-w-[90%]
origin-[0_0] truncate text-gray-500 transition-all
duration-200 ease-out peer-focus:scale-[0.8]
peer-focus:text-primary
peer-data-[te-input-state-active]:scale-[0.8]
motion-reduce:transition-none dark:text-gray-200
dark:peer-focus:text-gray-200
data-[te-input-state-active]:scale-[0.8]
|
Sets styles for select input label.
|
selectLabelWhite
|
!text-gray-50
|
Sets label color for
selectFormWhite attribute.
|
selectLabelSizeDefault
|
pt-[0.37rem] leading-[1.6] peer-focus:-translate-y-[0.9rem]
peer-data-[te-input-state-active]:-translate-y-[0.9rem]
data-[te-input-state-active]:-translate-y-[0.9rem]
|
Sets label styles for default select input size.
|
selectLabelSizeLg
|
pt-[0.37rem] leading-[2.15]
peer-focus:-translate-y-[1.15rem]
peer-data-[te-input-state-active]:-translate-y-[1.15rem]
data-[te-input-state-active]:-translate-y-[1.15rem]
|
Sets label styles for large select input size.
|
selectLabelSizeSm
|
pt-[0.37rem] text-xs leading-[1.5]
peer-focus:-translate-y-[0.75rem]
peer-data-[te-input-state-active]:-translate-y-[0.75rem]
data-[te-input-state-active]:-translate-y-[0.75rem]
|
Sets label styles for small select input size.
|
selectOption
|
flex flex-row items-center justify-between w-full px-4
truncate text-gray-700 bg-transparent select-none
cursor-pointer data-[te-input-multiple-active]:bg-black/5
hover:[&:not([data-te-select-option-disabled])]:bg-black/5
data-[te-input-state-active]:bg-black/5
data-[te-select-option-selected]:data-[te-input-state-active]:bg-black/5
data-[te-select-selected]:data-[te-select-option-disabled]:cursor-default
data-[te-select-selected]:data-[te-select-option-disabled]:text-gray-400
data-[te-select-selected]:data-[te-select-option-disabled]:bg-transparent
data-[te-select-option-selected]:bg-black/[0.02]
data-[te-select-option-disabled]:text-gray-400
data-[te-select-option-disabled]:cursor-default
group-data-[te-select-option-group-ref]/opt:pl-7
dark:text-gray-200
dark:hover:[&:not([data-te-select-option-disabled])]:bg-white/30
dark:data-[te-input-state-active]:bg-white/30
dark:data-[te-select-option-selected]:data-[te-input-state-active]:bg-white/30
dark:data-[te-select-option-disabled]:text-gray-400
dark:data-[te-input-multiple-active]:bg-white/30
|
Sets styles for every select options.
|
selectAllOption
|
|
Styling for select all option. By default it doesn't have
any classes added and is using the same styles as
selectOption . When classer are added, the
selectOption styles are not applied to the
select all option.
|
selectOptionGroup
|
group/opt
|
Adds named group class to opt elements.
|
selectOptionGroupLabel
|
flex flex-row items-center w-full px-4 truncate
bg-transparent text-black/50 select-none dark:text-gray-300
|
Sets styles for opt group labels.
|
selectOptionIcon
|
w-7 h-7 rounded-full
|
Sets size and border radius for icons.
|
selectOptionSecondaryText
|
block text-[0.8rem] text-gray-500 dark:text-gray-300
|
Sets font size, colors and other styles for secondary text.
|
selectOptionText
|
group
|
Adds group class to option text.
|
selectValidationValid
|
hidden absolute -mt-3 w-auto text-sm text-green-600
cursor-pointer
group-data-[te-was-validated]/validation:peer-valid:block
|
Sets styles for valid feedback information.
|
selectValidationInvalid
|
hidden absolute -mt-3 w-auto text-sm text-[rgb(220,76,100)]
cursor-pointer
group-data-[te-was-validated]/validation:peer-invalid:block
|
Sets styles for invalid feedback information.
|