Getting Started
App Providerglobal.d.tsThemesTypes
cn(...args)Text ParserUnits Converters
AnchorAvatarBreadcrumbBurgerButtonCardCarouselCheckerCodeColor PickerCommandConfettiCopyButtonDouble Helix WordsFloating IndicatorGroupHighlight TextIndicatorInputKbdLabelLoaderPaginationPassword RequirementPolymorphic SlotProgressProseRatingRunning AreaScroll AreaSheetsSkeletonSliderStackSvgTableTabsTextareaTimelineTimesToasterTooltipTyping WordsTypography
useClickOutsideuseClipboarduseDeviceInfouseDialoguseDidUpdateuseDirectionuseDisclosureuseDocumentTitleuseDocumentVisibilityuseElementInfouseEyeDropperuseFetchuseFullscreenuseGeoLocationuseHotkeysuseHoveruseIduseImagePopupuseInputStateuseIntersectionuseIntervaluseIsomorphicEffectuseListStateuseLocalStorageuseMeasureScrollbaruseMediaQueryuseMergedRefuseMouseuseMoveuseMutationObserveruseNetworkuseOpenStateuseOrientationuseOSusePaginationusePWAInstalleruseRandomColorsuseReducedMotionuseReloaduseResizeObserveruseScrollIntoViewuseStateHistoryuseTimeoutuseTouchuseTriggeruseUncontrolleduseValidatedStateuseViewportSizeuseWindowEventuseWindowScroll
Docs
Web
Components
Input
Indicator

A small visual indicator used to display status or alerts over other elements.

Kbd

A stylized component that displays keyboard keys for user instructions or guides.

Edit this page on GitHub
  • Started
  • Utilities
  • Configuration
  • Components
  • Hooks
  • Examples
  • Github
  • Contributing
⌘+J

© 2025 oeri rights MIT

Designed in Earth-616

Built by oeri

Input

A basic text input field with customizable props for user data entry, including support for various states and validation.

Properties

Interactive configurator to explore various customization options for the Input component. This section allows you to adjust and preview properties such as size, variant, radius, and other interactive behaviors.

"use client";
import React from "react";
import { Input } from "@/ui/input";
export function InputDemo() {
  const [value, setValue] = React.useState<string>("");
  const [checked, setChecked] = React.useState<boolean>(false);
  return (
    <Input
      type="text"
      value={value}
      checked={checked}
      onChange={e => setValue(e.target.value)}
      onClick={() => setChecked(c => !c)}
    />
  );
}

Input.Password

A demonstration of how to use the Input.Password variant. This specialized input field is designed for handling password entries, typically with additional features like show/hide password functionality.

"use client";
import React from "react";
import { Input } from "@/ui/input";

export function InputPasswordDemo() {
  const [value, setValue] = React.useState<string>("");

  return <Input.Password value={value} onChange={e => setValue(e.target.value)} />;
}

Type Checkbox

An example showcasing how to use the Input component with type="checkbox". Checkbox inputs are commonly used for toggling selections or options within a form.

"use client";
import React from "react";
import { Input } from "@/ui/input";
import { Stack } from "@/ui/stack";
import { Group } from "@/ui/group";
import { useListState } from "@/hooks/use-list-state";
import { sanitizedWord } from "@/utils/text-parser";

const initialValues = [
  { label: "Receive sms notifications", checked: false },
  { label: "Receive email notifications", checked: true },
  { label: "Receive push notifications", checked: false },
];

export function InputCheckboxDemo() {
  const [values, handlers] = useListState(initialValues);

  const allChecked = values.every(value => value.checked);
  const indeterminate = values.some(value => value.checked) && !allChecked;

  const items = values.map((value, index) => (
    <Group key={index} className="w-max">
      <Input type="checkbox" id={sanitizedWord(value.label)} className="ml-8" checked={value.checked} onChange={event => handlers.setItemProp(index, "checked", event.currentTarget.checked)} />
      <label htmlFor={sanitizedWord(value.label)} className="text-sm text-muted-foreground">
        {value.label}
      </label>
    </Group>
  ));

  return (
    <Stack className="m-auto mb-8">
      <Group className="w-max">
        <Input type="checkbox" checked={allChecked} indeterminate={indeterminate} id="all-notifications" onChange={() => handlers.setState(current => current.map(value => ({ ...value, checked: !allChecked })))} />
        <label htmlFor="all-notifications" className="text-sm text-muted-foreground">
          Receive all notifications
        </label>
      </Group>
      {items}
    </Stack>
  );
}

Checkbox Indeterminate

Demonstrates the indeterminate state of a checkbox input. An indeterminate checkbox represents a partially selected or ambiguous state, often used in tree view structures or when some but not all options are selected.

Clicking the button will change the status to indeterminate.

"use client";
import React from "react";
import { Input } from "@/ui/input";
import { Button } from "@/ui/button";
import { Stack } from "@/ui/stack";

export function CheckboxIndeterminateDemo() {
  const [isIndeterminate, setIsIndeterminate] = React.useState(false);
  const [checked, setChecked] = React.useState(false);

  return (
    <Stack className="m-auto border-t pt-8">
      <Input
        type="checkbox"
        indeterminate={isIndeterminate}
        checked={checked}
        onChange={e => {
          setChecked(e.target.checked);
          // setIsIndeterminate(false); // Remove indeterminate status if clicked
        }}
      />
      <Button onClick={() => setIsIndeterminate(i => !i)} className="w-max">
        Indeterminate
      </Button>
      <p className="text-sm text-muted-foreground">Clicking the button will change the status to indeterminate.</p>
    </Stack>
  );
}

About Indeterminate:

  • The indeterminate function is typically used to indicate a mixed or partial selection.
  • When indeterminate is set to true, the checkbox appears visually different from a fully checked or unchecked box.
  • This property is only relevant when the input type is set to "checkbox".

Input.Wrapper

A demonstration of how to use Input.Wrapper to structure and customize the layout of input fields. The Input.Wrapper component helps in organizing inputs with labels, error messages, and helper texts while ensuring consistent styling and behavior.

Size
import { Input } from "@/ui/input";

export function WrapperDemo() {
  return (
    <Input.Wrapper size={14}>
      <Input placeholder="enter here" />
    </Input.Wrapper>
  );
}

Note: The Input component automatically handles style changes and the onChange behavior based on the input type. For example, checkboxes, radios, and text inputs are each managed appropriately without needing separate handlers.

API References

  • mdn
  • Prefix input styles

Styles API

type Size = (number | (string & {})) | { h?: React.CSSProperties["height"]; w?: React.CSSProperties["width"] };
Styles APITypeDefaultAnnotation
unstyled?booleanfalseif true, all default styles will be removed
variant?React.HTMLInputTypeAttributetextsame with input type
size?Size{h: 36, w: "100%"}numbers are converted to rem

Props API

Input

Props APITypeDefaultAnnotation
type?HTMLInputTypeAttributetextHandle style changes and onChange based on input type
indeterminate?booleanundefinedAllows the checkbox to have a neutral state (neither checked nor unchecked). Useful if you want to use it on a checkbox type.

InputPassword

type InputPasswordTrees = "input" | "wrapper" | "toggle";
Props APITypeDefaultAnnotation
defaultOpen?booleanfalseThe open state of the view when it is initially rendered. Use when you do not need to control its open state.
open?booleanby defaultOpen valueThe controlled open state of the view inputs. Must be used in conjunction with onOpenChange.
onOpenChange?(open: SetStateAction<boolean>) => void---Event handler called when the open state of the view inputs moments changes.
toggleIcon?ReactNode | ((open: boolean) => ReactNode)---

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

input.tsx
globals.css
/* input */ @layer base { .stylelayer-inputs { @apply [-moz-appearance:none] [-webkit-appearance:none] appearance-none; &:is(input) { &:where([type="checkbox"]) { @apply [--check-sz:calc((var(--input-sz)*12)/100)] [--timing-function:cubic-bezier(0.25,0,0.35,1)]; &::before, &::after { @apply content-[''] absolute bg-[var(--checked-color,hsl(var(--background)))] block w-[--check-w] h-[--check-sz] rounded-full top-1/2 left-[19%] [transform-origin:left_center] [transform:--check-transform] [transition:transform_150ms_var(--timing-function)_var(--check-delay,0ms)]; } &::before { @apply [--check-w:calc(var(--check-sz)*3)] [--check-transform:rotate(45deg)_translate(calc(var(--check-sz)*-0.55),calc(var(--check-sz)*-0.45))_scaleX(var(--scale-x))] [--scale-x:0] [--check-delay:150ms]; } &::after { @apply [--check-w:calc(var(--check-sz)*5)] [--scale-x:0]; } &:not([data-state="indeterminate"]) { &::after { @apply [--check-transform:rotate(-45deg)_translate(calc(var(--check-sz)*0),calc(var(--check-sz)*2))_scaleX(var(--scale-x))]; } } &:checked { &::before { @apply [--scale-x:1]; } &::after { @apply [--scale-x:1] [--check-delay:150ms]; } } &:where([data-state="indeterminate"]) { &::before { @apply content-[none] hidden; } &::after { @apply inset-auto [--check-transform:none]; } } } &:where([type="radio"]) { @apply p-0 [--check-sz:calc(var(--input-sz)*(40/100))] [--timing-function:cubic-bezier(0.25,0,0.35,1)]; &::before { @apply content-[''] absolute bg-color block size-[--check-sz] rounded-full origin-center [transform:--check-transform] [transition:transform_150ms_var(--timing-function)_var(--check-delay,0ms)] [--check-transform:scale(var(--scale))] [--scale:0]; } &:checked { &::before { @apply [--scale:1]; } } } &:where([type="search"]) { &::before { @apply content-[''] absolute bg-color block size-[--check-sz] rounded-full origin-center [transform:--check-transform] [transition:transform_150ms_var(--timing-function)_var(--check-delay,0ms)] [--check-transform:scale(var(--scale))] [--scale:0]; } &:checked { &::before { @apply [--scale:1]; } } } &:where([type="email"]) { @apply [background:--bg-type-email]; --bg-type-email: 6px center / 20px no-repeat var(--bg-required); --bg-atmail: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNzU3NTc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHBhdGggZD0ibTE2LDh2NWMwLC44LjMyLDEuNTYuODgsMi4xMnMxLjMzLjg4LDIuMTIuODgsMS41Ni0uMzIsMi4xMi0uODguODgtMS4zMy44OC0yLjEydi0xYzAtMi4yNi0uNzYtNC40NS0yLjE3LTYuMjItMS40LTEuNzctMy4zNi0zLjAxLTUuNTYtMy41Mi0yLjItLjUxLTQuNS0uMjctNi41NS43LTIuMDQuOTYtMy42OSwyLjU5LTQuNjksNC42MS0xLDIuMDItMS4yOCw0LjMzLS44MSw2LjUzLjQ3LDIuMiwxLjY4LDQuMTksMy40Myw1LjYyLDEuNzQsMS40MywzLjkyLDIuMjMsNi4xOCwyLjI3LDIuMjYuMDQsNC40Ni0uNjksNi4yNS0yLjA2bS0yLjA4LTcuOTRjMCwyLjIxLTEuNzksNC00LDRzLTQtMS43OS00LTQsMS43OS00LDQtNCw0LDEuNzksNCw0WiIvPjwvc3ZnPg=="); &::-webkit-input-placeholder { @apply absolute inline-flex items-center left-8; } &::-moz-placeholder { @apply absolute inline-flex items-center left-8; } &:-moz-placeholder { @apply absolute inline-flex items-center left-8; } &:-ms-input-placeholder { @apply absolute inline-flex items-center left-8; } } &:where([type="date"], [type="datetime-local"], [type="month"], [type="week"]) { &::-webkit-calendar-picker-indicator { @apply [--sz-icon:22px] right-2 absolute z-[9] size-[--sz-icon] p-0 cursor-pointer [-moz-appearance:none] [-webkit-appearance:none] appearance-none [background:--calendar-check,var(--calendar-error,var(--calendar-add))]; } --calendar-add: no-repeat center url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM3NTc1NzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIGQ9Im02LDRoMTJjMi4yMSwwLDQsMS43OSw0LDR2MTBjMCwyLjIxLTEuNzksNC00LDRINmMtMi4yMSwwLTQtMS43OS00LTR2LTEwYzAtMi4yMSwxLjc5LTQsNC00Wm0yLTJ2My41bTgtMy41djMuNW0tOCw3LjVoOG0tNC00djgiLz48L3N2Zz4="); &:where(:valid:is(:not([value=""]))) { --calendar-check: no-repeat center url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM3NTc1NzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIGQ9Im02LDRoMTJjMi4yMSwwLDQsMS43OSw0LDR2MTBjMCwyLjIxLTEuNzksNC00LDRINmMtMi4yMSwwLTQtMS43OS00LTR2LTEwYzAtMi4yMSwxLjc5LTQsNC00Wm0yLTJ2My41bTgtMy41djMuNW0xLjMsNC42bC01LjQsNS40Yy0uNTMuNTMtMS40LjUzLTEuOTMsMGwtMy4yOC0zLjI4Ii8+PC9zdmc+"); } &:where(:is(:invalid)) { --calendar-error: scroll no-repeat center url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjYzAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIGQ9Im02LDRoMTJjMi4yMSwwLDQsMS43OSw0LDR2MTBjMCwyLjIxLTEuNzksNC00LDRINmMtMi4yMSwwLTQtMS43OS00LTR2LTEwYzAtMi4yMSwxLjc5LTQsNC00Wm0yLTJ2My41bTgtMy41djMuNW0tNi44MywxMC4zM2w1LjY2LTUuNjZtLTUuNjYsMGw1LjY2LDUuNjYiLz48L3N2Zz4="); } } &:where([type="time"]) { &::-webkit-calendar-picker-indicator { @apply [--sz-icon:22px] right-2 absolute z-[9] size-[--sz-icon] p-0 cursor-pointer [-moz-appearance:none] [-webkit-appearance:none] appearance-none [background:--clock-check,var(--clock-error,var(--clock-add))]; } --clock-add: no-repeat center url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM3NTc1NzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIGQ9Im0yMSwxM2MwLDQuOTctNC4wMyw5LTksOVMzLDE3Ljk3LDMsMTMsNy4wMyw0LDEyLDRzOSw0LjAzLDksOVptLTEzLDBoOG0tNC00djhtNi4yNS0xNWwzLjc1LDMuMzFNNS43NSwybC0zLjc1LDMuMzEiLz48L3N2Zz4="); &:where(:valid:is(:not([value=""]))) { --clock-check: no-repeat center url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM3NTc1NzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIGQ9Im0yMC45MiwxMi45OWMwLDQuOTctNC4wMyw5LTksOS00Ljk3LDAtOS00LjAzLTktOSwwLTQuOTcsNC4wMy05LDktOSw0Ljk3LDAsOSw0LjAzLDksOVptLTIuNzUtMTFsMy43NSwzLjMxTTUuNjcsMS45OWwtMy43NSwzLjMxbTEzLjY3LDEwLjU5bC0yLjc5LTEuNjZjLS40OS0uMjktLjg4LS45OC0uODgtMS41NXYtMy42OSIvPjwvc3ZnPg=="); } &:where(:is(:invalid)) { --clock-error: scroll no-repeat center url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjYzAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIGQ9Im0yMSwxM2MwLDQuOTctNC4wMyw5LTksOS00Ljk3LDAtOS00LjAzLTktOSwwLTQuOTcsNC4wMy05LDktOSw0Ljk3LDAsOSw0LjAzLDksOVptLTIuNzUtMTFsMy43NSwzLjMxTTUuNzUsMmwtMy43NSwzLjMxbTcuMTcsMTAuNTJsNS42Ni01LjY2bS01LjY2LDBsNS42Niw1LjY2Ii8+PC9zdmc+"); } } &:where([type="number"]) { &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { @apply p-0 m-0 [-moz-appearance:none] [-webkit-appearance:none] appearance-none h-auto; } } &:where([type="search"]) { @apply [-moz-appearance:none] [-webkit-appearance:none] appearance-none; &::-webkit-search-decoration { @apply p-0 m-0 [-moz-appearance:none] [-webkit-appearance:none] appearance-none h-auto; } } &:where([type="color"]) { @apply [--clip-path:circle(17px_at_center)]; &::-webkit-color-swatch-wrapper { @apply p-0 m-0 rounded-[--round,999px] scale-125 overflow-hidden border [-moz-appearance:none] [-webkit-appearance:none] appearance-none; } &::-webkit-color-swatch { @apply p-0 m-0 rounded-[--round,999px] scale-125 overflow-hidden border-0 outline-0 border-none outline-none border-transparent outline-offset-0 [-moz-appearance:none] [-webkit-appearance:none] appearance-none; } &::-moz-color-swatch { @apply p-0 m-0 rounded-[--round,999px] scale-125 overflow-hidden border-0 outline-0 border-none outline-none border-transparent outline-offset-0 [-moz-appearance:none] [-webkit-appearance:none] appearance-none; } } &:where([type="file"]) { @apply text-center [text-align-last:center]; &::before { @apply content-[attr(placeholder)] top-0 inset-x-0 text-muted-foreground absolute size-full flex items-center justify-center translate-y-[5%]; } &::-webkit-file-upload-button { @apply cursor-pointer p-0 m-0 size-[30%] absolute inset-1/2 -translate-x-1/2 -translate-y-full text-transparent rounded-xl [-moz-appearance:none] [-webkit-appearance:none] appearance-none [background:--upload-check,var(--upload-error,var(--upload-add))]; } &::file-selector-button { @apply cursor-pointer p-0 m-0 size-[30%] absolute inset-1/2 -translate-x-1/2 -translate-y-full text-transparent rounded-xl [-moz-appearance:none] [-webkit-appearance:none] appearance-none [background:--upload-check,var(--upload-error,var(--upload-add))]; } &::-ms-browse { @apply cursor-pointer p-0 m-0 size-[30%] absolute inset-1/2 -translate-x-1/2 -translate-y-full text-transparent rounded-xl [-moz-appearance:none] [-webkit-appearance:none] appearance-none [background:--upload-check,var(--upload-error,var(--upload-add))]; } --upload-add: scroll no-repeat center url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNzU3NTc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41Ij48cGF0aCBkPSJtMTIsMTR2N20tNC0zbDQtNCw0LDRtLTEyLTIuNDJjLTIuNy0yLjkyLTIuNjYtNy42MS4xMS0xMC40NywyLjc2LTIuODYsNy4yLTIuODEsOS45LjExLjc5Ljg2LDEuMzgsMS45MSwxLjcsMy4wNmgxLjc5YzIuNDksMCw0LjUsMi4xMyw0LjUsNC43NiwwLDEuNTktLjc1LDMuMDctMiwzLjk2Ii8+PC9zdmc+"); &:where(:valid:is(:not([value=""]))) { --upload-check: scroll no-repeat center url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDA3NmY1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41Ij48cGF0aCBkPSJtNCwxNS41OGMtMi43LTIuOTItMi42Ni03LjYxLjExLTEwLjQ3LDIuNzYtMi44Niw3LjItMi44MSw5LjkuMTEuNzkuODYsMS4zOCwxLjkxLDEuNywzLjA2aDEuNzljMi40OSwwLDQuNSwyLjEzLDQuNSw0Ljc2LDAsMS41OS0uNzUsMy4wNy0yLDMuOTZtLTIuNjktMS44bC01LjQsNS40Yy0uNTMuNTMtMS40LjUzLTEuOTMsMGwtMy4yOC0zLjI4Ii8+PC9zdmc+"); } &:where(:is(:invalid)) { --upload-error: scroll no-repeat center url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjY2MwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41Ij48cGF0aCBkPSJtNCwxNS41OGMtMi43LTIuOTItMi42Ni03LjYxLjExLTEwLjQ3LDIuNzYtMi44Niw3LjItMi44MSw5LjkuMTEuNzkuODYsMS4zOCwxLjkxLDEuNywzLjA2aDEuNzljMi40OSwwLDQuNSwyLjEzLDQuNSw0Ljc2LDAsMS41OS0uNzUsMy4wNy0yLDMuOTZtLTEwLjgzLDRsNS42Ni01LjY2bS01LjY2LDBsNS42Niw1LjY2Ii8+PC9zdmc+"); } } &:where([type="range"]) { @apply [--is-thumb-fill:radial-gradient(circle,var(--thumb-inner-color),var(--thumb-border),var(--thumb-outer-color)_var(--thumb-border))]; &:not(.slider-range) { @apply [--track-color:hsl(var(--muted))] [--clip-edges:5.5px] [--clip-top:3.5px] [--clip-bottom:12.5px] [--clip-further:calc(100%+6px)] [--is-track-clip:polygon(100%_0px,var(--clip-edges)_0px,0px_var(--clip-top),-100vmax_var(--clip-top),-100vmax_var(--clip-bottom),0px_var(--clip-bottom),var(--clip-edges)_100%,var(--clip-further)_var(--clip-further))] [--is-track-fill:calc(-100vmax-var(--thumb-sz))_0_0_calc(100vmax+(var(--thumb-sz)/3.5))_var(--track-color-active)]; } &::-webkit-slider-thumb { @apply size-[--thumb-sz] rounded-full relative cursor-pointer appearance-none transition-all [background:--is-thumb-fill] [box-shadow:--is-track-fill] [clip-path:--is-track-clip]; } &::-moz-range-thumb { @apply size-[--thumb-sz] rounded-full relative cursor-pointer appearance-none transition-all [background:--is-thumb-fill]; } &::-webkit-slider-runnable-track { @apply size-full rounded-full appearance-none transition-all [background:linear-gradient(var(--track-color)_0_0)_scroll_no-repeat_center/100%_var(--track-height)]; } &::-moz-range-track { @apply h-[var(--track-height)] rounded-full bg-[--track-color] w-full appearance-none transition-all; } &::-moz-range-progress { @apply h-[var(--track-height)] rounded-full bg-[--track-color-active] delay-75 appearance-none; } } } } }