Input Group

⟦Á lábéléd ñátívé íñpút wíth áñ óptíóñál préfíx, šúffíx, ór rélátéd áçtíóñ.~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

⟦Brówšérš~~~⟧: Chrome 123+Firefox 121+Safari 17.5+
⟦Tíér~~⟧: 0
⟦Fórçéd láýóút búdgét~~~~~~~⟧: 0 ms
⟦Áxé búdgét~~~~⟧: 0
⟦ŠŠR çómpátíblé~~~~~⟧: ⟦Ýéš~~⟧
⟦Públíšhéd çóñtráçt~~~~~~~⟧: ⟦Téšt hárñéšš~~~~~⟧

⟦Pláýgróúñd~~~~⟧

Input Group

Website

https://

Enter a domain. Add https:// when using the value.

React

CSS

Tailwind

import { Input, InputGroup, InputGroupAddon } from "@gunkin/uiify";

export default function Example() {
  return (
    <div className="example-field">
      <label htmlFor="input-group-website">Website</label>
      <InputGroup className="">
        <InputGroupAddon className="" align="start">
          https://
        </InputGroupAddon>
        <Input
          className=""
          id="input-group-website"
          name="website"
          type="text"
          inputMode="url"
          autoComplete="url"
          spellCheck={false}
          defaultValue="uiify.dev"
          aria-describedby="input-group-website-help"
        />
      </InputGroup>
      <p className="example-description" id="input-group-website-help">
        Enter a domain. Add https:// when using the value.
      </p>
    </div>
  );
}

/* Button — pill-shaped and monochrome: a filled foreground action by default, secondary for
   the tonal one, outline for the bordered one, ghost for a surface that only appears on
   hover, link for inline text actions.

   Filled variants are lit from above by two layers that sit between the fill and the label:
   - `::before`, the wash: a blurred copy of the shape raised by half its height, so only its
     soft lower edge glows inside the upper half. `filter` runs before `clip-path`, which lets
     one box blur itself and still be cut back to the button outline.
   - `::after`, the rim: a half-pixel ring whose colour fades out towards the bottom. A
     box-shadow cannot take a gradient and `border-image` ignores the radius, so the ring is
     a gradient box with its content box masked out. */

@layer components {
  :where([data-uiify-button]) {
    --uiify-button-rim: rgb(255 255 255 / 20%);
    --uiify-button-wash: light-dark(rgb(255 255 255 / 15%), rgb(255 255 255 / 30%));

    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-block-size: 44px;

    /* Never narrower than tall: an icon size only has to drop the padding to be a circle. */
    min-inline-size: 44px;
    padding-block: 0;
    padding-inline: 1.25rem;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-full);
    background-color: var(--foreground);
    background-clip: padding-box;
    color: var(--background);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: 1.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-colors);
  }

  :where([data-uiify-button])::before,
  :where([data-uiify-button])::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
  }

  :where([data-uiify-button])::before {
    background-color: var(--uiify-button-wash);
    filter: blur(10px);
    translate: 0 -50%;
    clip-path: inset(50% 0 -50% 0 round var(--radius-full));
  }

  :where([data-uiify-button])::after {
    padding: 0.5px;
    background-image: linear-gradient(to bottom, var(--uiify-button-rim), transparent 75%);
    mask:
      linear-gradient(#fff 0 0) content-box exclude,
      linear-gradient(#fff 0 0);
  }

  /* Sizes: md is the default metrics above. */
  [data-uiify-button]:is([data-size="sm"], [data-size="icon-sm"]) {
    min-block-size: 32px;
    min-inline-size: 32px;
    padding-inline: 0.75rem;
    gap: 0.25rem;
    font-size: var(--text-sm);
    line-height: 1.25rem;
  }

  [data-uiify-button]:is([data-size="lg"], [data-size="icon-lg"]) {
    min-block-size: 56px;
    min-inline-size: 56px;
    padding-inline: 1.75rem;
    font-size: var(--text-lg);
    line-height: 1.75rem;
  }

  /* Icon sizes: the same three heights with no padding, for a single icon. */
  [data-uiify-button][data-size^="icon"] {
    padding-inline: 0;
  }

  @media (any-hover: hover) and (any-pointer: fine) {
    [data-uiify-button]:hover:not(:disabled, [data-disabled]) {
      background-color: color-mix(in oklch, var(--foreground) 90%, var(--background));
    }
  }

  [data-uiify-button]:active:not(:disabled, [data-disabled]) {
    background-color: color-mix(in oklch, var(--foreground) 80%, var(--background));
  }

  [data-uiify-button]:disabled,
  [data-uiify-button][data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Secondary: tonal low-emphasis fill. */
  [data-uiify-button][data-variant="secondary"] {
    --uiify-button-rim: light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 10%));
    --uiify-button-wash: light-dark(rgb(255 255 255 / 20%), rgb(255 255 255 / 5%));

    background-color: color-mix(in oklch, var(--foreground) 10%, transparent);
    color: var(--foreground);
  }

  /* Outline: no fill and no wash, a hairline border in the text colour. Its rim is a full
     border-width ring laid over that border, so the top edge reads slightly stronger and
     fades into the plain border below. */
  [data-uiify-button][data-variant="outline"] {
    --uiify-button-rim: color-mix(in oklch, var(--foreground) 25%, transparent);

    border-color: color-mix(in oklch, var(--foreground) 20%, transparent);
    background-color: transparent;
    color: var(--foreground);
  }

  [data-uiify-button][data-variant="outline"]::before {
    content: none;
  }

  [data-uiify-button][data-variant="outline"]::after {
    inset: calc(-1 * var(--border-width));
    padding: var(--border-width);
  }

  [data-uiify-button][data-variant="outline"]:active:not(:disabled, [data-disabled]) {
    background-color: color-mix(in oklch, var(--foreground) 16%, transparent);
  }

  /* Ghost: text only; the tonal surface appears on hover. Flat, so no light layers. */
  [data-uiify-button][data-variant="ghost"] {
    background-color: transparent;
    color: var(--foreground);
  }

  [data-uiify-button][data-variant="ghost"]::before,
  [data-uiify-button][data-variant="ghost"]::after {
    content: none;
  }

  [data-uiify-button][data-variant="ghost"]:active:not(:disabled, [data-disabled]) {
    background-color: color-mix(in oklch, var(--foreground) 16%, transparent);
  }

  [data-uiify-button][data-variant="secondary"]:active:not(:disabled, [data-disabled]) {
    background-color: color-mix(in oklch, var(--foreground) 26%, transparent);
  }

  /* Destructive: irreversible or dangerous actions. */
  [data-uiify-button][data-variant="destructive"] {
    --uiify-button-wash: rgb(255 255 255 / 15%);

    background-color: var(--destructive);
    color: var(--destructive-foreground);
  }

  [data-uiify-button][data-variant="destructive"]:active:not(:disabled, [data-disabled]) {
    background-color: color-mix(in oklch, var(--destructive), black 20%);
  }

  @media (any-hover: hover) and (any-pointer: fine) {
    [data-uiify-button][data-variant="outline"]:hover:not(:disabled, [data-disabled]),
    [data-uiify-button][data-variant="ghost"]:hover:not(:disabled, [data-disabled]) {
      background-color: color-mix(in oklch, var(--foreground) 10%, transparent);
    }

    [data-uiify-button][data-variant="secondary"]:hover:not(:disabled, [data-disabled]) {
      background-color: color-mix(in oklch, var(--foreground) 20%, transparent);
    }

    [data-uiify-button][data-variant="destructive"]:hover:not(:disabled, [data-disabled]) {
      background-color: color-mix(in oklch, var(--destructive), black 12%);
    }
  }
}

@layer components {
  /* Selected: the chosen item of a set or a toggle that is on, filled with the brand colour.
     The state is read from whatever already carries it: the `selected` prop, a pressed toggle,
     the current page, or — for a label styled as a button — the checked native control right
     before it, so a toggle works with no JavaScript. */
  [data-uiify-button]:is([data-selected], [aria-pressed="true"], [aria-current="page"]),
  :checked + [data-uiify-button] {
    --uiify-button-rim: rgb(255 255 255 / 20%);
    --uiify-button-wash: rgb(255 255 255 / 15%);

    border-color: transparent;
    background-color: var(--primary);
    color: var(--primary-foreground);
  }

  @media (any-hover: hover) and (any-pointer: fine) {
    [data-uiify-button]:is([data-selected], [aria-pressed="true"], [aria-current="page"]):hover:not(
        :disabled,
        [data-disabled]
      ),
    :checked:not(:disabled) + [data-uiify-button]:hover {
      background-color: color-mix(in oklch, var(--primary) 88%, var(--primary-foreground));
    }
  }

  /* A label styled as a button follows the native control it belongs to. */
  :disabled + [data-uiify-button] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  [data-uiify-button][hidden] {
    display: none;
  }
}

@layer components {
  /* Link: an inline text action with no surface, on a button or an anchor alike. */
  [data-uiify-button][data-variant="link"],
  [data-uiify-button][data-variant="link"]:active {
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  [data-uiify-button][data-variant="link"] {
    min-inline-size: 0;
  }

  @media (any-hover: hover) and (any-pointer: fine) {
    [data-uiify-button][data-variant="link"]:hover {
      padding-inline: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--primary);
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }

  [data-uiify-button][data-variant="link"]::before,
  [data-uiify-button][data-variant="link"]::after {
    content: none;
  }

  [data-uiify-button][data-variant="link"]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 3px;
  }
}

/* Text fields — Input and Textarea share the same surface. Invalid state keys
   off the [data-invalid] attribute the components emit. Textarea autosize uses
   the native field-sizing (Chrome 123+) when the component sets data-autosize. */

@layer components {
  :where([data-uiify-input], [data-uiify-textarea]) {
    display: block;
    inline-size: 100%;
    max-inline-size: 24rem;
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border: var(--border-width) solid var(--input);
    border-radius: var(--radius-md);
    corner-shape: squircle;
    background-color: var(--card);
    color: var(--foreground);
    font-size: var(--uiify-control-text);
    line-height: var(--leading-normal);
    transition: var(--transition-colors);
  }

  :where([data-uiify-input], [data-uiify-textarea])::placeholder {
    color: var(--muted-foreground);
  }

  :where([data-uiify-input], [data-uiify-textarea]):focus-visible {
    border-color: var(--primary);
  }

  :where([data-uiify-input], [data-uiify-textarea]):disabled,
  :where([data-uiify-input], [data-uiify-textarea])[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  :where([data-uiify-input], [data-uiify-textarea])[data-invalid],
  :where([data-uiify-input], [data-uiify-textarea]):user-invalid {
    border-color: var(--destructive);
  }

  :where([data-uiify-input], [data-uiify-textarea])[data-invalid]:focus-visible {
    outline-color: var(--destructive);
  }

  [data-uiify-textarea] {
    min-block-size: 4lh;
    resize: block;
  }

  [data-uiify-textarea][data-autosize] {
    field-sizing: content;
    resize: none;
  }

  [data-uiify-field] {
    display: grid;
    gap: var(--space-sm);
    inline-size: 100%;
    max-inline-size: 24rem;
  }

  [data-uiify-field] [data-part="label"] {
    color: var(--foreground);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
  }

  [data-uiify-field] [data-part="label"][data-required]::after {
    content: " *";
    color: var(--destructive);
  }

  [data-uiify-field] [data-part="description"] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }

  [data-uiify-field] [data-part="error"] {
    margin: 0;
    color: var(--destructive);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }

  /* Shared presence fade when an error message is mounted. */
  @media (prefers-reduced-motion: no-preference) {
    [data-uiify-field] [data-part="error"] {
      transition: opacity var(--duration-fast) var(--ease-out);
    }

    @starting-style {
      [data-uiify-field] [data-part="error"] {
        opacity: 0;
      }
    }
  }
}

@layer components {
  [data-uiify-input-group][data-part="root"] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    inline-size: 100%;
    max-inline-size: 24rem;
    min-inline-size: 0;
    min-block-size: 2.75rem;
    padding-inline: var(--space-md);
    border: var(--border-width) solid var(--input);
    border-radius: var(--radius-md);
    corner-shape: squircle;
    background-color: var(--card);
    color: var(--foreground);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    transition: var(--transition-colors);
  }

  [data-uiify-input-group][data-part="root"] > :is(input, textarea, select) {
    flex: 1 1 0%;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: none;
    min-block-size: 2.625rem;
    padding-block: var(--space-sm);
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    box-shadow: none;
    outline: none;
  }

  [data-uiify-input-group][data-part="root"] > :is(input, textarea, select):focus-visible {
    box-shadow: none;
    outline: none;
  }

  [data-uiify-input-group][data-part="root"]:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 var(--ring-width) color-mix(in oklch, var(--ring) 20%, transparent);
  }

  [data-uiify-input-group][data-part="root"] > [data-part="addon"] {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-inline-size: 0;
    max-inline-size: 50%;
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
  }

  [data-uiify-input-group] > [data-part="addon"] > [data-uiify-button] {
    min-inline-size: 0;
    max-inline-size: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Reorder passive affixes only. Actions keep their DOM and keyboard order. */
  [data-uiify-input-group]
    > [data-part="addon"][data-align="start"]:not(
      :has(:is(a[href], button, input, select, textarea, [tabindex]))
    ) {
    order: -1;
  }

  [data-uiify-input-group]
    > [data-part="addon"][data-align="end"]:not(
      :has(:is(a[href], button, input, select, textarea, [tabindex]))
    ) {
    order: 1;
  }

  [data-uiify-input-group][data-part="root"]:has(
      > :is(input, textarea, select):is(:disabled, [data-disabled])
    ) {
    cursor: not-allowed;
  }

  [data-uiify-input-group][data-part="root"]
    > :is(input, textarea, select):is(:disabled, [data-disabled]) {
    opacity: 0.5;
  }

  [data-uiify-input-group][data-part="root"]:has(
      > :is(input, textarea, select):is([data-invalid], [aria-invalid="true"], :user-invalid)
    ) {
    border-color: var(--destructive);
  }

  [data-uiify-input-group][data-part="root"]:has(
      > :is(input, textarea, select):is([data-invalid], [aria-invalid="true"], :user-invalid)
    ):focus-within {
    box-shadow: 0 0 0 var(--ring-width) color-mix(in oklch, var(--destructive) 20%, transparent);
  }
}
/* Example layout; component surfaces use the skins above. */
.example-form, .example-field {
  display: grid;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 24rem;
  min-inline-size: 0;
  margin: 0;
}
:is(.example-form, .example-field) * { box-sizing: border-box; }
.example-form { gap: 1.5rem; }
.example-field { gap: 0.5rem; }
.example-field > label {
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}
.example-field > [data-uiify-input] { min-block-size: 2.75rem; }
.example-description, .example-error {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.example-description { color: var(--muted-foreground); }
.example-error { color: var(--destructive); }

import { Input, InputGroup, InputGroupAddon } from "@gunkin/uiify";

export default function Example() {
  return (
    <div className="grid gap-2 [min-inline-size:0]">
      <label htmlFor="input-group-website">Website</label>
      <InputGroup
        className={
          "flex items-center gap-sm [inline-size:100%] [max-inline-size:24rem] [min-inline-size:0] [min-block-size:2" +
          ".75rem] px-md border-[length:var(--border-width)] border-solid border-input rounded-md [corner-shape:squi" +
          "rcle] bg-card text-foreground text-sm [line-height:var(--leading-normal)] [transition:var(--transition-co" +
          "lors)] focus-within:border-primary focus-within:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_v" +
          "ar(--ring)_20%,_transparent)] has-[>input:disabled]:cursor-not-allowed has-[>[data-disabled]]:cursor-not-" +
          "allowed has-[:is(input,textarea,select):is([data-invalid],[aria-invalid=true],:user-invalid)]:border-dest" +
          "ructive has-[:is(input,textarea,select):is([data-invalid],[aria-invalid=true],:user-invalid)]:focus-withi" +
          "n:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--destructive)_20%,_transparent)] [&>:is(in" +
          "put,textarea,select):is(:disabled,[data-disabled])]:opacity-50 [&>[data-part=addon][data-align=start]:not" +
          "(:has(:is(a[href],button,input,select,textarea,[tabindex])))]:[-order:1] [&>[data-part=addon][data-align=" +
          "end]:not(:has(:is(a[href],button,input,select,textarea,[tabindex])))]:[order:1] [&>[data-part=addon]>[dat" +
          "a-uiify-button]]:[min-inline-size:0] [&>[data-part=addon]>[data-uiify-button]]:[max-inline-size:100%] [&>" +
          "[data-part=addon]>[data-uiify-button]]:whitespace-normal [&>[data-part=addon]>[data-uiify-button]]:[overf" +
          "low-wrap:anywhere]"
        }
      >
        <InputGroupAddon
          className="
            flex items-center [flex:0_1_auto] [min-inline-size:0] [max-inline-size:50%] text-muted-foreground
            [overflow-wrap:anywhere]
          "
          align="start"
        >
          https://
        </InputGroupAddon>
        <Input
          className="
            flex-1 [inline-size:100%] [min-inline-size:0] [max-inline-size:none] [min-block-size:2.625rem] py-sm px-0
            border-0 border-none rounded-none bg-transparent text-inherit [font:inherit] [box-shadow:none]
            [outline:none] placeholder:text-muted-foreground focus-visible:[box-shadow:none]
            focus-visible:[outline:none]
          "
          id="input-group-website"
          name="website"
          type="text"
          inputMode="url"
          autoComplete="url"
          spellCheck={false}
          defaultValue="uiify.dev"
          aria-describedby="input-group-website-help"
        />
      </InputGroup>
      <p className="m-0 text-sm text-muted-foreground" id="input-group-website-help">
        Enter a domain. Add https:// when using the value.
      </p>
    </div>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('flex items-center gap-sm [inline-size:100%] [max-inline-size:24rem] [min-inline-size:0] [min-block-size:2.75rem] px-md border-[length:var(--border-width)] border-solid border-input rounded-md [corner-shape:squircle] bg-card text-foreground text-sm [line-height:var(--leading-normal)] [transition:var(--transition-colors)] focus-within:border-primary focus-within:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transparent)] has-[>input:disabled]:cursor-not-allowed has-[>[data-disabled]]:cursor-not-allowed has-[:is(input,textarea,select):is([data-invalid],[aria-invalid=true],:user-invalid)]:border-destructive has-[:is(input,textarea,select):is([data-invalid],[aria-invalid=true],:user-invalid)]:focus-within:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--destructive)_20%,_transparent)] [&>:is(input,textarea,select):is(:disabled,[data-disabled])]:opacity-50 [&>[data-part=addon][data-align=start]:not(:has(:is(a[href],button,input,select,textarea,[tabindex])))]:[-order:1] [&>[data-part=addon][data-align=end]:not(:has(:is(a[href],button,input,select,textarea,[tabindex])))]:[order:1] [&>[data-part=addon]>[data-uiify-button]]:[min-inline-size:0] [&>[data-part=addon]>[data-uiify-button]]:[max-inline-size:100%] [&>[data-part=addon]>[data-uiify-button]]:whitespace-normal [&>[data-part=addon]>[data-uiify-button]]:[overflow-wrap:anywhere] [flex:0_1_auto] [max-inline-size:50%] text-muted-foreground [overflow-wrap:anywhere] flex-1 [max-inline-size:none] [min-block-size:2.625rem] py-sm px-0 border-0 border-none rounded-none bg-transparent text-inherit [font:inherit] [box-shadow:none] [outline:none] placeholder:text-muted-foreground focus-visible:[box-shadow:none] focus-visible:[outline:none] grid gap-2 m-0');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

⟦Éxámpléš~~~⟧

Currency and units

Use passive affixes for context and keep a visible label on the input. The amount is in US dollars.

Price

$USD

Amount in US dollars.

import { Input, InputGroup, InputGroupAddon } from "@gunkin/uiify";

export default function Example() {
  return (
    <div className="example-field">
      <label htmlFor="input-group-amount">Price</label>
      <InputGroup>
        <InputGroupAddon align="start">$</InputGroupAddon>
        <Input id="input-group-amount" name="price" inputMode="decimal" defaultValue="25.00" aria-describedby="input-group-amount-help" />
        <InputGroupAddon align="end">USD</InputGroupAddon>
      </InputGroup>
      <p className="example-description" id="input-group-amount-help">Amount in US dollars.</p>
    </div>
  );
}

A native search form

This demo submits q to the current page with GET; it does not filter the documentation. Replace action with your own search endpoint.

import { Button, Input, InputGroup, InputGroupAddon } from "@gunkin/uiify";

export default function Example() {
  return (
    <search className="example-field">
      <form className="example-field" action="/components/input-group" method="get">
        <label htmlFor="input-group-search">Search</label>
        <InputGroup>
          <Input id="input-group-search" name="q" type="search" defaultValue="accessibility" />
          <InputGroupAddon align="end"><Button size="sm" type="submit">Search</Button></InputGroupAddon>
        </InputGroup>
      </form>
    </search>
  );
}

Invalid and disabled fields

Describe server errors below the input. A disabled input does not disable a related Configure link.

Website

https://

Enter a valid domain.

Endpoint

Configure

import { Button, Input, InputGroup, InputGroupAddon } from "@gunkin/uiify";

export default function Example() {
  return (
    <div className="example-form">
      <div className="example-field">
        <label htmlFor="input-group-states-website">Website</label>
        <InputGroup>
          <InputGroupAddon align="start">https://</InputGroupAddon>
          <Input id="input-group-states-website" name="website" invalid defaultValue="not a domain" aria-describedby="input-group-states-error" />
        </InputGroup>
        <p className="example-error" id="input-group-states-error">Enter a valid domain.</p>
      </div>
      <div className="example-field">
        <label htmlFor="input-group-states-endpoint">Endpoint</label>
        <InputGroup>
          <Input id="input-group-states-endpoint" name="endpoint" disabled defaultValue="api.uiify.dev" />
          <InputGroupAddon align="end"><Button as="a" href="/docs/installation" size="sm" variant="ghost">Configure</Button></InputGroupAddon>
        </InputGroup>
      </div>
    </div>
  );
}

⟦ÁPÍ~~⟧

`InputGroup`

⟦Próp~~⟧	⟦Týpé~~⟧	⟦Défáúlt~~~⟧	⟦Déšçríptíóñ~~~~⟧
`children`	`ReactNode`	—	⟦Ñátívé çóñtrólš áñd óptíóñál štárt/éñd áddóñš.~~~~~~~~~~~~~~~~~⟧
`className / style / ref / native div props`	`native div props`	—	⟦Ñátívé wráppér própš, štýléš, évéñtš, áñd réf áré fórwárdéd.~~~~~~~~~~~~~~~~~~~~~⟧
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	⟦Répláçé thé réñdéréd éléméñt whílé kéépíñg béhávíór áñd áççéššíbílítý wíríñg.~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

`InputGroupAddon`

⟦Próp~~⟧	⟦Týpé~~⟧	⟦Défáúlt~~~⟧	⟦Déšçríptíóñ~~~~⟧
`align`*	`"start" \| "end"`	—	⟦Pláçéš thé áddóñ át thé lógíçál íñlíñé štárt ór éñd.~~~~~~~~~~~~~~~~~~~⟧
`children`	`ReactNode`	—	⟦Áddóñ çóñtéñt; ít dóéš ñót lábél thé íñpút.~~~~~~~~~~~~~~~~⟧
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	⟦Répláçé thé réñdéréd éléméñt whílé kéépíñg béhávíór áñd áççéššíbílítý wíríñg.~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

⟦Kéýbóárd~~~⟧

⟦Kéý~~⟧	⟦Áçtíóñ~~~⟧

⟦Áççéššíbílítý~~~~~⟧

⟦Á láýóút wráppér áróúñd çóñšúmér-ówñéd ñátívé çhíldréñ. Lábél thé íñpút íñdépéñdéñtlý; áddóñš áré ñót lábélš, áñd áçtíóñš rémáíñ ñátívé líñkš ór búttóñš. Thé wráppér áddš ñó fóçúš, válídátíóñ, ór çlíéñt béhávíór.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

⟦Štýlíñg hóókš~~~~~⟧

data-uiify-input-groupdata-part="root|addon"data-align

⟦Fráméwórk~~~~⟧

⟦Štýlé~~⟧

⟦Thémé~~⟧

⟦Láñgúágé~~~⟧

Input Group

⟦Pláýgróúñd~~~~⟧

Input Group

⟦Éxámpléš~~~⟧

Currency and units

A native search form

Invalid and disabled fields

⟦ÁPÍ~~⟧

`InputGroup`

`InputGroupAddon`

⟦Kéýbóárd~~~⟧

⟦Áççéššíbílítý~~~~~⟧

⟦Štýlíñg hóókš~~~~~⟧