Koori UI
Components

GlassInput

A glassmorphism-styled input that extends the native HTML input element.

Preview

Usage

import { GlassInput } from "koori-ui";
 
<GlassInput placeholder="Enter text..." />
<GlassInput type="email" placeholder="you@example.com" />
<GlassInput type="password" placeholder="Password" />

Controlled

import { useState } from "react";
import { GlassInput } from "koori-ui";
 
function Example() {
  const [value, setValue] = useState("");
  return (
    <GlassInput
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Type here..."
    />
  );
}

Disabled

<GlassInput disabled placeholder="Disabled input" />

Props

PropTypeDefaultDescription
typestring"text"Native input type
placeholderstringPlaceholder text
disabledbooleanfalseDisables the input
classNamestringAdditional CSS classes

All native <input> props are also accepted.

On this page