Atoms

Input

Text input with size variants.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/input

Install the following dependencies:

npm install class-variance-authority

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { Input } from '@/components/ui/input'
<Input placeholder="Search transactions..." />

Examples#

Disabled#

With Label#

With Button#

Mono Font#

Inputs are sans by default, because most fields hold language a person types. Set font='mono' for a field whose value is machine data — an account address, an asset code, a hash — where character disambiguation matters more than reading flow.