Input | Park UI

Installation

npx @park-ui/cli@next add input

Add Component

Copy the code snippet below into you components folder.

import { Field } from '@ark-ui/react/field'
import type { ComponentProps } from 'react'
import { styled } from 'styled-system/jsx'
import { input } from 'styled-system/recipes'

export type InputProps = ComponentProps<typeof Input>
export const Input = styled(Field.Input, input)

Integrate Recipe

Integrate this recipe in to your Panda config.

import type { RecipeConfig } from '@pandacss/dev'

export const input = {
  className: 'input',
  jsx: ['Input', 'Field.Input'],
  base: {
    appearance: 'none',
    borderRadius: 'l2',
    height: 'var(--input-height)',
    minHeight: 'var(--input-height)',
    minW: 'var(--input-height)',
    outline: '0',
    position: 'relative',
    textAlign: 'start',
    transition: 'colors',
    transitionProperty: 'box-shadow, border-color',
    width: '100%',
    _disabled: {
      layerStyle: 'disabled',
    },
  },
  defaultVariants: {
    size: 'md',
    variant: 'outline',
  },
  variants: {
    variant: {
      outline: {
        borderWidth: '1px',
        borderColor: 'gray.outline.border',
        focusVisibleRing: 'inside',
        focusRingColor: 'colorPalette.solid.bg',
        _invalid: {
          focusRingColor: 'red.9',
          borderColor: 'red.9',
        },
      },
      surface: {
        bg: 'gray.surface.bg',
        borderWidth: '1px',
        borderColor: 'gray.surface.border',
        focusVisibleRing: 'inside',
        focusRingColor: 'colorPalette.solid.bg',
        _invalid: {
          focusRingColor: 'red.9',
          borderColor: 'red.9',
        },
      },
      subtle: {
        borderWidth: '1px',
        borderColor: 'transparent',
        bg: 'gray.subtle.bg',
        color: 'gray.subtle.fg',
        focusVisibleRing: 'inside',
        focusRingColor: 'colorPalette.solid.bg',
        _invalid: {
          focusRingColor: 'red.9',
          borderColor: 'red.9',
        },
      },
      flushed: {
        borderBottomWidth: '1px',
        borderBottomColor: 'gray.a7',
        borderRadius: '0',
        color: 'gray.12',
        px: '0',
        _invalid: {
          borderColor: 'red.9',
        },
        _focus: {
          borderColor: 'colorPalette.solid.bg',
          boxShadowColor: 'colorPalette.solid.bg',
          boxShadow: '0 1px 0 0 var(--shadow-color)',
          _invalid: {
            boxShadowColor: 'red.9',
            borderColor: 'red.9',
          },
        },
      },
    },
    size: {
      '2xs': { textStyle: 'xs', px: '1.5', '--input-height': 'sizes.7' },
      xs: { textStyle: 'sm', px: '2', '--input-height': 'sizes.8' },
      sm: { textStyle: 'sm', px: '2.5', '--input-height': 'sizes.9' },
      md: { textStyle: 'md', px: '3', '--input-height': 'sizes.10' },
      lg: { textStyle: 'md', px: '3.5', '--input-height': 'sizes.11' },
      xl: { textStyle: 'lg', px: '4', '--input-height': 'sizes.12' },
      '2xl': { textStyle: '3xl', px: '4.5', '--input-height': 'sizes.16' },
    },
  },
} satisfies RecipeConfig

Usage

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

<Input placeholder="Enter your email" />

Examples

Variants

Use the variant prop to change the visual style of the input.

Sizes

Use the size prop to change the size of the input.

Field

Compose the input with the Field component to add a label, helper text, and error message.

EmailYour email will not be shared with anyone else.

Required

Pass the required prop to Field.Root and use the Field.RequiredIndicator to indicate that the input is required.

Invalid

Pass the invalid prop to the Field.Root and use the Field.ErrorText to indicate that the input is invalid.

EmailPlease enter a valid email address.

Element

Use the startElement and endElement on the InputGroup component to add an element to the start and end of the input.

https://

⌘K

USD

Addon

Use the InputAddon and Group components to add an addon to the input.

https://

.com

USD

Button

Use the Group component to attach a button to the input.

Ref

Here's how to access the underlying element reference

'use client'
import { useRef } from 'react'
import { Input } from '@/components/ui'

export const App = () => {
  const ref = useRef<HTMLInputElement>(null)
  return <Input ref={ref} />
}

Props

Prop	Default	Type
`variant`	`'outline'`	`'outline' \| 'surface' \| 'subtle' \| 'flushed'`
`size`	`'md'`	`'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`