Field | Zalify UI

React

Usage

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

<Field.Root>
  <Field.Label>
    <Field.RequiredIndicator />
  </Field.Label>
  <Input />
  <Field.HelperText />
  <Field.ErrorText />
</Field.Root>

Examples

Invalid

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

EmailThis is an error text

React

HelperText

Use the Field.HelperText to add helper text to the field.

EmailThis is a helper text

React

Disabled

Use the disabled prop to disable the field.

EmailThis is a helper text

React

Required

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

React

Closed Component

Here's how to setup the field for a closed component composition.

import { forwardRef, type ReactNode } from 'react'
import { Field as StyledField } from '@zalify-ui/react'

export interface FieldProps extends Omit<StyledField.RootProps, 'label'> {
  label?: ReactNode
  helperText?: ReactNode
  errorText?: ReactNode
  optionalText?: ReactNode
}

export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(props, ref) {
  const { label, children, helperText, errorText, optionalText, ...rest } = props
  return (
    <StyledField.Root ref={ref} {...rest}>
      {label && (
        <StyledField.Label>
          {label}
          <StyledField.RequiredIndicator fallback={optionalText} />
        </StyledField.Label>
      )}
      {children}
      {helperText && <StyledField.HelperText>{helperText}</StyledField.HelperText>}
      <StyledField.ErrorText>{errorText}</StyledField.ErrorText>
    </StyledField.Root>
  )
})

Props

Root

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`		`boolean` Indicates whether the field is disabled.
`ids`		`ElementIds` The ids of the field parts.
`invalid`		`boolean` Indicates whether the field is invalid.
`readOnly`		`boolean` Indicates whether the field is read-only.
`required`		`boolean` Indicates whether the field is required.

RequiredIndicator

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`fallback`		`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`

Textarea

Prop	Default	Type
`autoresize`	`false`	`boolean` Whether the textarea should autoresize
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.