basecn
Components

Field

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

Docs
Payment Method

All transactions are secure and encrypted

Enter your 16-digit card number

Billing Address

The billing address associated with your payment method

Installation

pnpm dlx shadcn@latest add https://basecn.dev/r/field.json
or

If you are using a namespaced registry, you can use the following command:

pnpm dlx shadcn@latest add @basecn/field

Examples

Input

Choose a unique username for your account.

Must be at least 8 characters long.

Textarea

Share your thoughts about our service.

Select

Select your department or area of work.

Slider

Price Range

Set your budget range ($200 - 800).

Fieldset

Address Information

We need your address to deliver your order.

Checkbox

Show these items on the desktop

Select the items you want to show on the desktop.

Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.

Radio

Yearly and lifetime plans offer significant savings.

Switch

Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.

Choice Card

Select the compute environment for your cluster.

Field Group

Get notified when ChatGPT responds to requests that take time, like research or image generation.

Get notified when tasks you've created have updates. Manage tasks

Migrating from Radix UI

Common Migration Steps

All components share several migration patterns when moving from Radix UI to Base UI. Before proceeding with component-specific changes, review the essential migration patterns.

Familiarizing yourself with these patterns will make the component-specific migration steps much clearer.

Docs by Fumadocs
Analytics by Databuddy