Field

Provides a flexible container for form inputs, labels, and helper text.

Password

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

export const FieldBasics = () => {
  return (
    <Field.Root>
      <Field.Label>Password</Field.Label>
      <Input type="password" placeholder="enter your password" />
    </Field.Root>
  )
}

Usage

import { Field } from '@fidely-ui/react'

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

Examples

Error Text

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

EmailThis is an error text

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

export const FieldError = () => {
  return (
    <Field.Root invalid>
      <Field.Label>Email</Field.Label>
      <Input placeholder="fidelyui@example.com" />
      <Field.Error>This is an error text</Field.Error>
    </Field.Root>
  )
}

Helper Text

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

EmailThis is a helper text

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

export const FieldHelper = () => {
  return (
    <Field.Root>
      <Field.Label>Email</Field.Label>
      <Input placeholder="fidelyui@example.com" />
      <Field.HelperText>This is a helper text</Field.HelperText>
    </Field.Root>
  )
}

Disable

You can use the disabled prop to disable the field.

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

export const FieldDisabled = () => {
  return (
    <Field.Root disabled>
      <Field.Label>Email</Field.Label>
      <Input placeholder="fidelyui@example.com" />
    </Field.Root>
  )
}

Textarea

This example illustrates how to use the Field component with a textarea element.

You can pass the autoresize prop to the Textarea component to enable automatic resizing as the user types.

Password

import { Field, Textarea } from '@fidely-ui/react'

export const FieldTextarea = () => {
  return (
    <Field.Root>
      <Field.Label>Password</Field.Label>
      <Textarea placeholder="Enter Bio..." />
    </Field.Root>
  )
}

Props

Root

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