Input

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

Preview

Code

import Input from '@dinui/react/input'

export default function InputDemo() {
  return <Input type="email" placeholder="Email" />
}

File

Preview

Picture

Code

import Input from '@dinui/react/input'
import Label from '@dinui/react/label'

export default function InputFile() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="picture">Picture</Label>
      <Input id="picture" type="file" />
    </div>
  )
}

Disabled

Preview

Code

import Input from '@dinui/react/input'

export default function InputDisabled() {
  return <Input disabled type="email" placeholder="Email" />
}

With Label

Preview

Email

Code

import Input from '@dinui/react/input'
import Label from '@dinui/react/label'

export default function InputWithLabel() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
    </div>
  )
}

With Button

Preview

Subscribe

Code

import Button from '@dinui/react/button'
import Input from '@dinui/react/input'

export default function InputWithButton() {
  return (
    <form className="flex w-full max-w-sm items-center space-x-2">
      <Input type="email" placeholder="Email" required />
      <Button type="submit">Subscribe</Button>
    </form>
  )
}

Form

Preview

Username

This is your public display name.

Submit

Code

'use client'

import Button from '@dinui/react/button'
import Form, { useForm } from '@dinui/react/form'
import Input from '@dinui/react/input'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

const FormSchema = z.object({
  username: z.string().min(2, {
    message: 'Username must be at least 2 characters.',
  }),
})

export default function InputForm() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      username: '',
    },
  })

  function onSubmit(data: z.infer<typeof FormSchema>) {
    alert(`You submitted the following values: ${JSON.stringify(data, null, 2)}`)
  }

  return (
    <Form form={form} onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
      <Form.Field
        control={form.control}
        name="username"
        render={({ field }) => (
          <Form.Item>
            <Form.Label>Username</Form.Label>
            <Form.Control>
              <Input placeholder="dinwwwh" {...field} />
            </Form.Control>
            <Form.Description>This is your public display name.</Form.Description>
            <Form.ErrorMessage />
          </Form.Item>
        )}
      />

      <Button type="submit">Submit</Button>
    </Form>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add input

   yarn

   yarn dlx @dinui/cli@latest add input

   pnpm

   pnpm dlx @dinui/cli@latest add input

   bun

   bunx @dinui/cli@latest add input

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install tailwind-variants

   yarn

   yarn add tailwind-variants

   pnpm

   pnpm add tailwind-variants

   bun

   bun add tailwind-variants

3. Copy and paste the following code into your project

   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   
   const input = tv({
     slots: {
       root: [
         'h-9 w-full rounded-md border px-3 py-1',
         'text-sm shadow-sm transition-colors',
         'placeholder:text-fg-weaker',
         'disabled:cursor-not-allowed disabled:opacity-50',
         'file:rounded-md file:border-border file:border file:bg-transparent file:text-sm file:font-medium',
         '[&[type=file]]:px-2 [&[type=file]]:py-[0.3125rem]',
       ],
     },
   })
   
   const Input = forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<'input'>>(
     (props, ref) => {
       const { root } = input()
   
       return (
         <input type="string" {...props} ref={ref} className={root({ className: props.className })} />
       )
     },
   )
   Input.displayName = 'Input'
   
   export default Input
   export { input }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.