Input
A field that allows user input, often used for forms or search functionality.
Usage
import { Stack } from 'styled-system/jsx'
import { FormLabel, Input, type InputProps } from '~/components/ui'
export const Demo = (props: InputProps) => {
return (
<Stack gap="1.5" width="2xs">
<FormLabel htmlFor="name">Name</FormLabel>
<Input id="name" placeholder="Your Name" {...props} />
</Stack>
)
}
Installation
npx @park-ui/cli components add input1
Styled Primitive
Copy the code snippet below into ~/components/ui/primitives/input.tsx
import { ark } from '@ark-ui/react/factory'
import { styled } from 'styled-system/jsx'
import { input } from 'styled-system/recipes'
import type { ComponentProps } from 'styled-system/types'
export type InputProps = ComponentProps<typeof Input>
export const Input = styled(ark.input, input)
import { ark } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { styled } from 'styled-system/jsx'
import { input } from 'styled-system/recipes'
export type InputProps = ComponentProps<typeof Input>
export const Input = styled(ark.input, input)
import { styled } from 'styled-system/jsx'
import { input } from 'styled-system/recipes'
import type { ComponentProps } from 'styled-system/types'
export type InputProps = ComponentProps<typeof Input>
export const Input = styled('input', input)
Extend ~/components/ui/primitives/index.ts with the following line:
export { Input, type InputProps } from './input'2
Integrate Recipe
If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:
import { defineRecipe } from '@pandacss/dev'
export const input = defineRecipe({
className: 'input',
base: {
appearance: 'none',
background: 'none',
borderColor: 'border.default',
borderRadius: 'l2',
borderWidth: '1px',
colorPalette: 'accent',
color: 'fg.default',
outline: 0,
position: 'relative',
transitionDuration: 'normal',
transitionProperty: 'box-shadow, border-color',
transitionTimingFunction: 'default',
width: 'full',
_disabled: {
opacity: 0.4,
cursor: 'not-allowed',
},
_focus: {
borderColor: 'colorPalette.default',
boxShadow: '0 0 0 1px var(--colors-color-palette-default)',
},
},
defaultVariants: {
size: 'md',
},
variants: {
size: {
'2xs': { px: '1.5', h: '7', minW: '7', fontSize: 'xs' },
xs: { px: '2', h: '8', minW: '8', fontSize: 'xs' },
sm: { px: '2.5', h: '9', minW: '9', fontSize: 'sm' },
md: { px: '3', h: '10', minW: '10', fontSize: 'md' },
lg: { px: '3.5', h: '11', minW: '11', fontSize: 'md' },
xl: { px: '4', h: '12', minW: '12', fontSize: 'lg' },
'2xl': { px: '2', h: '16', minW: '16', textStyle: '3xl' },
},
},
})