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.

Checkbox

A control that allows the user to toggle between checked and not checked.

Resizable

Accessible resizable panel groups and layouts with keyboard support.

On this page

InstallationExamplesWithout BorderSearch InputAPI ReferenceInput