Input

Component

Input

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

Installation

Copy and paste the following code into your project

components/ui/input/index.tsx

import { styled, type HTMLStyledProps } from '@shadow-panda/styled-system/jsx'
import { input } from '@shadow-panda/styled-system/recipes'
 
export const Input = styled('input', input)
export type InputProps = HTMLStyledProps<typeof Input>

Update the import paths to match your project setup

Usage

import { Input } from '@/components/ui/input'

<Input />

Installation

Copy and paste the following code into your project

Update the import paths to match your project setup

Usage

Examples

Default

File

Disabled

With Label

With Button

Form