Notion UI
Documentation

Input

Displays a form input field or a component that looks like an input field.

Shadcn UI

<Input className="w-80" />

Installation

pnpm add @notion-kit/shadcn

Examples

Without Border

<Input
  variant="flat"
  className="w-80"
  placeholder="Enter something..."
/>

Search Input

<Input
  className="w-80"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  onCancel={() => setValue("")}
  placeholder="Enter something..."
  search
  clear
/>

API Reference

Input

An Input extends the HTML <input> component. We list the extended properties only.

PropTypeDefaultDescription
variant"default" | "plain" | "flat""default"The visual style of the input.
searchboolean-Whether the search icon is shown.
clearboolean-Whether the clear button is shown.
endIconReact.ReactNode-An icon at the end of the input.
onCancel() => void-Handler that is called when the clear button is clicked.

Previous

Checkbox

Next

Resizable

On this page