Input

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

<Input className="w-80" />

<Input className="w-80" />

Installation

pnpm add @notion-kit/ui

pnpm add @notion-kit/ui

Examples

Without Border

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

<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
/>

<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.

Prop	Type	Default	Description
`variant`	`"default" \| "plain" \| "flat"`	`"default"`	The visual style of the input.
`search`	`boolean`	-	Whether the search icon is shown.
`clear`	`boolean`	-	Whether the clear button is shown.
`endIcon`	`React.ReactNode`	-	An icon at the end of the input.
`onCancel`	`() => void`	-	Handler that is called when the clear button is clicked.

Input

Installation

Examples

Without Border

Search Input

API Reference

Input

On this page