Components
Input
'use client';
import { Input } from '@/components/ui/input';
export default function InputDemo() {
return (
<div className='flex flex-col flex-wrap items-center gap-2'>
<Input placeholder='Input' className='w-32' />
<Input placeholder='Input large' size='large' className='w-32' />
</div>
);
}
Manual Installation
import * as React from 'react';
import { Input as BaseInput } from '@base-ui-components/react';
import { cn } from '@/lib/utils';
import { cva, type VariantProps } from 'class-variance-authority';
const inputVariants = cva(
'placeholder:text-grey-400 border border-transparent selection:bg-blue-500 text-black-800 flex w-full min-w-0 rounded-md bg-grey-100 px-2 typography-body-medium outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 hover:border-grey-200 focus-visible:border-blue-500 aria-invalid:ring-red-500/20 aria-invalid:border-red-500 dark:placeholder:text-grey-400 dark:bg-grey-700 dark:text-white-1000 dark:hover:border-grey-600 dark:focus-visible:border-blue-500',
{
variants: {
size: {
default: 'h-6',
large: 'h-8',
},
},
defaultVariants: {
size: 'default',
},
}
);
interface InputProps
extends Omit<React.ComponentProps<'input'>, 'size'>,
VariantProps<typeof inputVariants> {}
function Input({ className, type, size, ...props }: InputProps) {
return (
<BaseInput
type={type}
className={cn(inputVariants({ size, className }))}
{...props}
/>
);
}
export { Input };