Input

Usage

import { Input } from '@zalify-ui/react'

<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.

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.

Element

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

Addon

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

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 '@zalify-ui/react'

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

Props