Input Primitives

Core input elements for forms and user interaction

Button

Interactive button component with multiple variants and sizes

Standard Variants

Button Sizes

Button States

Prop	Type	Default	Description
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"default"`	Visual style variant
`size`	`"default" \| "sm" \| "lg" \| "icon"`	`"default"`	Button size
`asChild`	`boolean`	`false`	Render as child element (for Link wrapping)
`disabled`	`boolean`	`false`	Disable button interactions

import { Button } from '@/ui/primitives';

<Button variant="default" size="default">
  Click me
</Button>

<Button variant="outline" size="icon">
  <Icon icon={faGear} />
</Button>

Input

Single-line text input field

Text Input

Number Input (No Spinners)

Disabled Input

Prop	Type	Default	Description
`type`	`"text" \| "email" \| "password" \| "number" \| ...`	`"text"`	Input type
`placeholder`	`string`	`-`	Placeholder text
`disabled`	`boolean`	`false`	Disable input
`className`	`string`	`-`	Additional CSS classes

Textarea

Multi-line text input area

Multiline Input

Disabled Textarea

Prop	Type	Default	Description
`rows`	`number`	`-`	Number of visible rows
`placeholder`	`string`	`-`	Placeholder text
`disabled`	`boolean`	`false`	Disable textarea

Label

Accessible label for form controls

Standard Label

Prop	Type	Default	Description
`htmlFor`	`string`	`-`	ID of associated input
`className`	`string`	`-`	Additional CSS classes

Slider

Range selection control with drag interaction

Value: 50

Prop	Type	Default	Description
`value`	`number[]`	`-`	Current value(s)
`onValueChange`	`(value: number[]) => void`	`-`	Change handler
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment

Calendar

Embedded calendar for date selection

December 2025

Prop	Type	Default	Description
`mode`	`"single" \| "range" \| "multiple"`	`"single"`	Selection mode
`selected`	`Date \| undefined`	`-`	Selected date(s)
`onSelect`	`(date: Date) => void`	`-`	Selection handler
`disabled`	`boolean \| Matcher`	`false`	Disable dates

DatePicker

Input with calendar popover for date selection

Select Date

Prop	Type	Default	Description
`date`	`Date \| undefined`	`-`	Selected date
`onDateChange`	`(date: Date) => void`	`-`	Change handler
`placeholder`	`string`	`-`	Button placeholder text
`disabled`	`boolean`	`false`	Disable picker

Dropzone

File upload area with drag-and-drop support

Upload Files

Prop	Type	Default	Description
`accept`	`Accept`	`-`	Accepted file types (MIME types)
`maxFiles`	`number`	`1`	Maximum number of files
`maxSize`	`number`	`-`	Maximum file size in bytes
`onDrop`	`(files: File[]) => void`	`-`	Drop handler
`disabled`	`boolean`	`false`	Disable dropzone

Form

React Hook Form integration components for validated forms

Form primitives integrate with React Hook Form and Zod for type-safe form validation. Use FormField, FormItem, FormLabel, FormControl, FormDescription, and FormMessage together for complete form handling.

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/ui/primitives';
import { z } from 'zod';

const schema = z.object({ email: z.string().email() });

function MyForm() {
  const form = useForm({ resolver: zodResolver(schema) });

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </form>
    </Form>
  );
}

Prop

Type

Default

Description

variant

"default"

Visual style variant

size

"default" | "sm" | "lg" | "icon"

"default"

Button size

asChild

boolean

false

Render as child element (for Link wrapping)

disabled

boolean

false

Disable button interactions

Prop

Type

Default

Description

type

"text" | "email" | "password" | "number" | ...

"text"

Input type

placeholder

string

-

Placeholder text

disabled

boolean

false

Disable input

className

string

-

Additional CSS classes

Prop

Type

Default

Description

rows

number

-

Number of visible rows

placeholder

string

-

Placeholder text

disabled

boolean

false

Disable textarea

Prop

Type

Default

Description

htmlFor

string

-

ID of associated input

className

string

-

Additional CSS classes

Prop

Type

Default

Description

value

number[]

-

Current value(s)

onValueChange

(value: number[]) => void

-

Change handler

min

number

0

Minimum value

max

number

100

Maximum value

step

number

1

Step increment

Prop

Type

Default

Description

mode

"single" | "range" | "multiple"

"single"

Selection mode

selected

Date | undefined

-

Selected date(s)

onSelect

(date: Date) => void

-

Selection handler

disabled

boolean | Matcher

false

Disable dates

Prop

Type

Default

Description

date

Date | undefined

-

Selected date

onDateChange

(date: Date) => void

-

Change handler

placeholder

string

-

Button placeholder text

disabled

boolean

false

Disable picker

Prop

Type

Default

Description

accept

Accept

-

Accepted file types (MIME types)

maxFiles

number

1

Maximum number of files

maxSize

number

-

Maximum file size in bytes

onDrop

(files: File[]) => void

-

Drop handler

disabled

boolean

false

Disable dropzone

import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/ui/primitives'; import { z } from 'zod'; const schema = z.object({ email: z.string().email() }); function MyForm() { const form = useForm({ resolver: zodResolver(schema) }); return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)}> <FormField control={form.control} name="email" render={({ field }) => ( <FormItem> <FormLabel>Email</FormLabel> <FormControl> <Input {...field} /> </FormControl> <FormMessage /> </FormItem> )} /> </form> </Form> ); }

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa