WFP logoDesign System

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

Installation

pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/input.json

Usage

import { Input } from "@/components/ui/input";
<Input type="email" placeholder="Email" />

Examples

File

File input with support for single and multiple files.

Disabled

Disabled state for inputs.

With label

Inputs paired with labels for better accessibility.