Field

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

Profile

This appears on invoices and emails.

Full name

This appears on invoices and emails.

Username

Choose another username.

Subscribe to the newsletter

Installation

pnpm dlx shadcn@latest add https://blok-staging.vercel.app/r/field.json

Usage

Examples

The following are examples of our field components.

Input

Account Information

Username

Choose a unique username for your account.

Password

Must be at least 8 characters long.

Textarea

Message

Your message

Please provide details about your inquiry.

Select

Preferences

Country

Select your country of residence.

Checkbox

Notifications

Manage how you receive updates.

Email notifications

SMS notifications

Radio Group

Payment Method

Select payment method

Credit Card

PayPal

Choose your preferred payment method.

Switch

Settings

Dark mode

Enable notifications

With Separator

Personal Information

First name

Last name

Contact Information

With Error

Please enter a valid email address.

Password

Password must be at least 8 characters
Password must contain a number

Input with Icon

Contact

Input with icon

Helper text with a link at the end

Input with Addon

Phone Number

Input with addon

+234

Helper text

Disabled

Account Settings

Input disabled

Helper text

ReadOnly

Account Settings

Input readOnly

Helper text

Small Size

Small Inputs

Input sm

This Input has the prop size="sm" enabled

Select sm

This Select has the prop size="sm" enabled

Input sm with addon

+234

Input Types

Various Input Types

Input color

Date Picker

Select a single date using the Blok date picker.

Date Range Picker

Select a date range using the Blok date picker.

Input email

Input file

Input number

Input search

Input tel

Time Picker

Select time using dropdown selects for hour, minute, and period.

Input url