Input

Text input primitive from @cassa/ui-forms. Handles label, helper text, and error state. Label linked via useId(), errors announced via aria-invalid + aria-describedby.

Import

import { Input } from '@cassa/ui-forms'

Default

With helper text

UsernameLetters, numbers, and underscores only.

Error state

EmailPlease enter a valid email address.

Sizes

With React Hook Form

Use FormField for zero-boilerplate RHF integration:

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { Input, FormField } from '@cassa/ui-forms'
import { z } from 'zod'

const schema = z.object({ email: z.string().email() })

export const MyForm = () => {
  const { control, handleSubmit } = useForm({
    resolver: zodResolver(schema),
  })

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <FormField
        name="email"
        control={control}
        render={({ field, error }) => (
          <Input {...field} label="Email" type="email" error={error} />
        )}
      />
    </form>
  )
}

Props

Prop	Type	Default	Description
label	string	—	Renders an accessible <label> linked via useId().
helperText	string	—	Shown below the input when there is no error.
error	string	—	Switches border to error color, sets aria-invalid, and shows an error message.
size	"sm" \| "md" \| "lg"	"md"	Controls height and font size.
id	string	—	Overrides the auto-generated ID from useId().
...props	Omit<InputHTMLAttributes, "size">	—	All native input attributes. The native size attribute is omitted.