72Começar
HextaUI

Field

Rótulos, descrições e erros ligados ao seu controle, com estados de validação e layouts para formulários.

Shown on your profile.

"use client"

import { Form } from "@base-ui/react/form"
import { IconAt } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldCounter,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldStatus,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupTextarea,
} from "@/components/ui/input-group"

export function FieldDemo() {
  return (
    <Form
      className="w-full max-w-sm"
      onSubmit={(event) => event.preventDefault()}
    >
      <FieldGroup indicator="optional">
        <Field validationMode="onBlur">
          <FieldLabel>Display name</FieldLabel>
          <Input name="name" autoComplete="name" required />
          <FieldError match="valueMissing">
            Add the name people will see.
          </FieldError>
        </Field>
        <Field validationMode="onChange">
          <FieldLabel>Handle</FieldLabel>
          <InputGroup>
            <InputGroupInput
              name="handle"
              autoComplete="username"
              pattern="[a-z0-9_]{3,15}"
              maxLength={15}
              required
            />
            <InputGroupAddon>
              <IconAt />
            </InputGroupAddon>
            <InputGroupAddon align="inline-end">
              <FieldStatus />
            </InputGroupAddon>
          </InputGroup>
          <FieldError match="valueMissing">Pick a handle.</FieldError>
          <FieldError match="patternMismatch">
            Use 3–15 lowercase letters, numbers or underscores.
          </FieldError>
        </Field>
        <Field>
          <FieldLabel>Bio</FieldLabel>
          <InputGroup>
            <InputGroupTextarea name="bio" maxLength={160} />
          </InputGroup>
          <div className="flex items-baseline justify-between gap-3">
            <FieldDescription>Shown on your profile.</FieldDescription>
            <FieldCounter />
          </div>
        </Field>
        <Button type="submit">Save profile</Button>
      </FieldGroup>
    </Form>
  )
}

Instalação

pnpm dlx shadcn@latest add https://hextaui.com/r/field.json

Adiciona o componente, os tokens de tema do HextaUI e quaisquer componentes do HextaUI dos quais ele depende.

Uso

import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
<FieldGroup indicator="optional">
  <Field>
    <FieldLabel>Email</FieldLabel>
    <Input type="email" required />
    <FieldDescription>We’ll never share it.</FieldDescription>
    <FieldError />
  </Field>
</FieldGroup>

Coloque qualquer controle do HextaUI dentro de um <Field /> e ele é rotulado, descrito e validado automaticamente. Não é preciso ligar id, htmlFor ou aria-describedby à mão.

Composição

Campo único

Um controle com seu rótulo, texto de ajuda e validação.

Field
├── FieldLabel
├── Input / Textarea / Select / …
├── FieldDescription
├── FieldError
├── FieldCounter
└── FieldStatus

Campo horizontal

Um switch ou checkbox com seu texto ao lado.

Field
├── Switch / Checkbox
└── FieldContent
    ├── FieldLabel
    └── FieldDescription

Card de escolha

Um rótulo que envolve um campo inteiro, para que o card seja o alvo do clique.

FieldLabel
└── Field
    ├── Checkbox / RadioGroupItem
    └── FieldContent
        ├── FieldTitle
        └── FieldDescription

Campos agrupados

Campos relacionados, com espaçamento uniforme.

FieldGroup
├── Field
├── FieldSeparator
└── Field

Fieldsets

Um grupo de campos com título, ou um grupo de radio ou checkbox com um item por opção.

FieldSet
├── FieldLegend
├── FieldDescription
└── FieldGroup
    └── Field

FieldSet
├── FieldLegend
└── FieldItem
    ├── RadioGroupItem / Checkbox
    └── FieldLabel

Exemplos

Input

Um rótulo, um controle e uma descrição. Clicar no rótulo foca o input, e os leitores de tela leem a descrição depois do rótulo.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldInput() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Username</FieldLabel>
      <Input placeholder="ada" autoComplete="username" />
      <FieldDescription>
        Shown on your profile. You can change it once a month.
      </FieldDescription>
    </Field>
  )
}

Validação

Restrições nativas como required e minLength são verificadas no blur. Dê a cada <FieldError /> um match para redigir a mensagem para cada problema. Um campo obrigatório vazio só é sinalizado depois de ter sido editado, então passar por ele com Tab não grita.

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldValidation() {
  return (
    <Field validationMode="onBlur" className="max-w-sm">
      <FieldLabel>Password</FieldLabel>
      <Input
        type="password"
        autoComplete="new-password"
        required
        minLength={8}
      />
      <FieldDescription>At least 8 characters.</FieldDescription>
      <FieldError match="valueMissing">Choose a password.</FieldError>
      <FieldError match="tooShort">
        That’s too short. Use 8 or more characters.
      </FieldError>
    </Field>
  )
}

Validação personalizada

Passe validate para verificar qualquer coisa, inclusive consultas assíncronas. Retorne uma mensagem para falhar ou nada para passar. Com validationMode="onChange" e validationDebounceTime, roda durante a digitação sem disparar a cada tecla. Experimente “ada”.

"use client"

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

const taken = ["admin", "ada", "hexta"]

async function checkUsername(value: unknown) {
  const name = String(value ?? "")
    .trim()
    .toLowerCase()
  if (name.length === 0) {
    return null
  }
  if (!/^[a-z0-9_]+$/.test(name)) {
    return "Use letters, numbers and underscores only."
  }
  await new Promise((resolve) => setTimeout(resolve, 400))
  return taken.includes(name) ? `“${name}” is taken.` : null
}

export function FieldCustomValidation() {
  return (
    <Field
      validationMode="onChange"
      validationDebounceTime={300}
      validate={checkUsername}
      className="max-w-sm"
    >
      <FieldLabel>Username</FieldLabel>
      <Input placeholder="Try “ada”" autoComplete="off" />
      <FieldDescription>Checked as you type.</FieldDescription>
      <FieldError />
    </Field>
  )
}

Obrigatório e opcional

Defina indicator em um FieldGroup, FieldSet ou Field e todo rótulo dentro se marca a partir do atributo required do seu controle. "optional" marca os campos que as pessoas podem pular, o que fica mais calmo quando a maioria dos campos é obrigatória. "required" adiciona um asterisco. A marca fica oculta para leitores de tela porque o controle já a anuncia.

import {
  Field,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldIndicatorDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8">
      <FieldGroup indicator="optional">
        <Field>
          <FieldLabel>Email</FieldLabel>
          <Input type="email" autoComplete="email" required />
        </Field>
        <Field>
          <FieldLabel>Company</FieldLabel>
          <Input autoComplete="organization" />
        </Field>
      </FieldGroup>
      <FieldSeparator />
      <FieldGroup indicator="required">
        <Field>
          <FieldLabel>Card number</FieldLabel>
          <Input inputMode="numeric" autoComplete="cc-number" required />
        </Field>
        <Field>
          <FieldLabel>Billing note</FieldLabel>
          <Input />
        </Field>
      </FieldGroup>
    </div>
  )
}

Status

<FieldStatus /> desenha uma marca quando um campo editado passa na validação e mostra um ícone de alerta enquanto ele falha. Segue o validationMode do campo, então nunca julga um campo antes de a validação ter rodado.

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
  FieldStatus,
} from "@/components/ui/field"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"

export function FieldStatusDemo() {
  return (
    <Field validationMode="onChange" className="max-w-sm">
      <FieldLabel>Invite code</FieldLabel>
      <InputGroup>
        <InputGroupInput
          name="code"
          pattern="HX-[0-9]{4}"
          placeholder="HX-0000"
          autoComplete="off"
        />
        <InputGroupAddon align="inline-end">
          <FieldStatus />
        </InputGroupAddon>
      </InputGroup>
      <FieldDescription>Try HX-2026.</FieldDescription>
      <FieldError match="patternMismatch">
        Codes look like HX- followed by four digits.
      </FieldError>
    </Field>
  )
}

Contagem de caracteres

<FieldCounter /> encontra o controle de texto em seu campo e conta em relação ao seu maxLength. Ele apenas escuta, então a digitação nunca é retardada nem alterada.

import {
  Field,
  FieldCounter,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldCounterDemo() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Status</FieldLabel>
      <Input defaultValue="Shipping the field rework" maxLength={40} />
      <div className="flex items-baseline justify-between gap-3">
        <FieldDescription>Clears after 24 hours.</FieldDescription>
        <FieldCounter />
      </div>
    </Field>
  )
}

Erros de uma biblioteca de formulários ou do servidor

Passe invalid ao campo e um array errors a <FieldError />. Ele aceita o formato { message } que o React Hook Form e a maioria das bibliotecas de schema retornam. Duplicatas são descartadas, e várias mensagens viram uma lista. Quando as mensagens mudam, as novas aparecem com fade e a altura se ajusta suavemente, então nada abaixo salta. Envie vazio e depois corrija uma regra por vez.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

type Errors = {
  email?: { message: string }[]
  password?: { message: string }[]
}

export function FieldErrors() {
  const [errors, setErrors] = React.useState<Errors>({})

  return (
    <form
      className="w-full max-w-sm"
      onSubmit={(event) => {
        event.preventDefault()
        const data = new FormData(event.currentTarget)
        const password = String(data.get("password") ?? "")
        const next: Errors = {}
        if (!String(data.get("email") ?? "").includes("@")) {
          next.email = [{ message: "Enter a valid email." }]
        }
        const problems = []
        if (password.length < 8) {
          problems.push({ message: "Use at least 8 characters." })
        }
        if (!/\d/.test(password)) {
          problems.push({ message: "Include a number." })
        }
        if (problems.length > 0) {
          next.password = problems
        }
        setErrors(next)
      }}
    >
      <FieldGroup>
        <Field invalid={Boolean(errors.email)}>
          <FieldLabel>Email</FieldLabel>
          <Input name="email" autoComplete="email" />
          <FieldError errors={errors.email ?? []} />
        </Field>
        <Field invalid={Boolean(errors.password)}>
          <FieldLabel>Password</FieldLabel>
          <Input name="password" type="password" autoComplete="new-password" />
          <FieldError errors={errors.password ?? []} />
        </Field>
        <Button type="submit">Sign up</Button>
      </FieldGroup>
    </form>
  )
}

Checkboxes

Use orientation="horizontal" para colocar o checkbox ao lado do rótulo. Dentro de um <FieldSet />, a legend dá nome ao grupo inteiro.

import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"

const options = [
  { value: "mentions", label: "Mentions" },
  { value: "replies", label: "Replies to my comments" },
  { value: "digest", label: "Weekly digest" },
]

export function FieldCheckbox() {
  return (
    <FieldSet className="w-full max-w-sm">
      <FieldLegend variant="label">Email me about</FieldLegend>
      <FieldDescription>Security alerts are always on.</FieldDescription>
      <CheckboxGroup defaultValue={["mentions", "replies"]}>
        {options.map((option) => (
          <Field key={option.value} orientation="horizontal">
            <Checkbox name="notifications" value={option.value} />
            <FieldLabel>{option.label}</FieldLabel>
          </Field>
        ))}
      </CheckboxGroup>
    </FieldSet>
  )
}

Cards de escolha

Envolva um campo inteiro em <FieldLabel /> para fazer do card o alvo do clique. Use <FieldTitle /> dentro, já que labels não podem ser aninhados. O card ganha um tom quando marcado e exibe o anel de foco quando seu checkbox recebe foco.

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,
  FieldTitle,
} from "@/components/ui/field"

export function FieldChoiceCard() {
  return (
    <FieldSet className="w-full max-w-sm">
      <FieldLegend variant="label">Add-ons</FieldLegend>
      <div className="flex flex-col gap-3">
        <FieldLabel>
          <Field orientation="horizontal">
            <Checkbox name="backups" defaultChecked />
            <FieldContent>
              <FieldTitle>Daily backups</FieldTitle>
              <FieldDescription>
                Restore any day from the last 30.
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
        <FieldLabel>
          <Field orientation="horizontal">
            <Checkbox name="support" />
            <FieldContent>
              <FieldTitle>Priority support</FieldTitle>
              <FieldDescription>Replies within four hours.</FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
        <FieldLabel>
          <Field orientation="horizontal" disabled>
            <Checkbox name="sso" />
            <FieldContent>
              <FieldTitle>Single sign-on</FieldTitle>
              <FieldDescription>
                Available on the Business plan.
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
      </div>
    </FieldSet>
  )
}

Fieldset

<FieldSet /> agrupa campos relacionados sob um <FieldLegend />, que se torna o nome acessível do grupo. Disponha os campos lado a lado com um grid simples.

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldFieldset() {
  return (
    <FieldSet className="w-full max-w-md">
      <FieldLegend>Shipping address</FieldLegend>
      <FieldDescription>Where should we send your order?</FieldDescription>
      <FieldGroup>
        <Field>
          <FieldLabel>Street address</FieldLabel>
          <Input autoComplete="street-address" />
        </Field>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <Field>
            <FieldLabel>City</FieldLabel>
            <Input autoComplete="address-level2" />
          </Field>
          <Field>
            <FieldLabel>Postal code</FieldLabel>
            <Input autoComplete="postal-code" />
          </Field>
        </div>
      </FieldGroup>
    </FieldSet>
  )
}

Responsivo

orientation="responsive" empilha o rótulo e o controle em espaços estreitos e os coloca lado a lado quando o <FieldGroup /> ao redor é largo o bastante. Ele responde à largura do grupo, não da janela.

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldResponsive() {
  return (
    <FieldGroup className="w-full max-w-xl">
      <Field orientation="responsive">
        <FieldContent>
          <FieldLabel>Display name</FieldLabel>
          <FieldDescription>Shown next to your messages.</FieldDescription>
        </FieldContent>
        <Input placeholder="Ada" className="sm:max-w-56" />
      </Field>
      <Field orientation="responsive">
        <FieldContent>
          <FieldLabel>Website</FieldLabel>
          <FieldDescription>Linked from your profile.</FieldDescription>
        </FieldContent>
        <Input placeholder="example.com" className="sm:max-w-56" />
      </Field>
    </FieldGroup>
  )
}

Desabilitado

Desativar um <FieldSet /> desativa todos os campos e controles dentro dele. Passe disabled a um único <Field /> para desativar apenas esse.

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldDisabled() {
  return (
    <FieldSet disabled className="w-full max-w-sm">
      <FieldLegend>Billing details</FieldLegend>
      <FieldDescription>Managed by your organization’s admin.</FieldDescription>
      <FieldGroup>
        <Field>
          <FieldLabel>Company</FieldLabel>
          <Input defaultValue="Acme Inc." />
        </Field>
        <Field orientation="horizontal">
          <Checkbox defaultChecked />
          <FieldLabel>Send invoices by email</FieldLabel>
        </Field>
      </FieldGroup>
    </FieldSet>
  )
}

Conteúdo longo

Rótulos, descrições e erros quebram de linha em formulários estreitos, inclusive strings sem quebra, e nunca alargam o layout.

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldLongContent() {
  return (
    <Field invalid className="w-72">
      <FieldLabel>
        A label long enough to wrap onto a second line in a narrow form
      </FieldLabel>
      <Input defaultValue="averyveryverylongunbrokenvaluethatkeepsgoing" />
      <FieldDescription>
        averyveryverylongunbrokendescriptionthatmustwrapinsteadofoverflowing
      </FieldDescription>
      <FieldError
        errors={[
          {
            message:
              "This message is long on purpose and wraps onto several lines without pushing anything wider.",
          },
        ]}
      />
    </Field>
  )
}

Da direita para a esquerda

O texto, a posição do checkbox e as listas de erros seguem a direção de leitura.

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldRtl() {
  return (
    <div dir="rtl" className="w-full max-w-sm">
      <FieldGroup>
        <Field invalid>
          <FieldLabel>البريد الإلكتروني</FieldLabel>
          <Input type="email" defaultValue="ada@" />
          <FieldDescription>
            سنرسل رابط التأكيد إلى هذا العنوان.
          </FieldDescription>
          <FieldError errors={[{ message: "أدخل عنوان بريد صالحًا." }]} />
        </Field>
        <Field orientation="horizontal">
          <Checkbox defaultChecked />
          <FieldLabel>تذكرني</FieldLabel>
        </Field>
      </FieldGroup>
    </div>
  )
}

Acessibilidade

  • O rótulo, a descrição e os erros visíveis são vinculados ao controle para você, então os leitores de tela anunciam os três quando ele recebe foco.
  • Controles inválidos recebem aria-invalid, que também desenha o anel de erro.
  • Os erros não são regiões live. Eles são lidos quando o controle recebe foco, então validar a cada mudança não interrompe a digitação. No envio, mova o foco para o primeiro campo inválido.
  • Os erros crescem e aparecem com fade no lugar em vez de empurrar o conteúdo para baixo. Com movimento reduzido ativado, aparecem sem animação.

Referência da API

Construído sobre o field e o fieldset do Base UI. Cada parte aceita as props do elemento ou da primitiva que renderiza.

Field

PropTipoPadrão
orientation
"vertical" | "horizontal" | "responsive""vertical"
indicatorMarca o rótulo a partir do atributo required do controle. Herdado de FieldGroup ou FieldSet.
"required" | "optional" | null–
nameIdentifica o campo quando o formulário é enviado.
string–
validateRetorne uma ou mais mensagens para falhar, ou nada para passar. Há suporte a async.
(value, formValues) => string | string[] | null | Promise<…>–
validationMode
"onSubmit" | "onBlur" | "onChange""onSubmit"
validationDebounceTimeMilissegundos de espera entre as validações de onChange.
number0
invalidDefina a partir de uma biblioteca de formulários ou da resposta do servidor.
boolean–
disabled
booleanfalse
dirty
boolean–
touched
boolean–
actionsRefValida o campo de forma imperativa.
RefObject<{ validate: () => void }>–
render
ReactElement | (props, state) => ReactElement<div>
AtributoDescrição
data-slot="field"Seleciona os campos no CSS.
data-orientationA orientação atual.
data-disabledPresente quando o campo está desativado.
data-validPresente quando o campo é válido.
data-invalidPresente quando o campo é inválido.
data-dirtyPresente depois que o valor mudou em relação ao inicial.
data-touchedPresente depois que o controle recebeu foco e o perdeu.
data-filledPresente quando o controle tem um valor.
data-focusedPresente enquanto o controle tem foco.

FieldLabel

PropTipoPadrão
nativeLabelDefina como false quando render troca o label por um elemento que não é label.
booleantrue
optionalTextTexto exibido com indicator="optional".
ReactNode"Optional"
render
ReactElement | (props, state) => ReactElement<label>
AtributoDescrição
data-slot="field-label"Seleciona os rótulos no CSS. Fora de um campo, renderiza um label simples, que é como os cards de escolha funcionam.
data-disabledPresente quando o campo está desativado.
data-validPresente quando o campo é válido.
data-invalidPresente quando o campo é inválido.
data-dirtyPresente depois que o valor mudou em relação ao inicial.
data-touchedPresente depois que o controle recebeu foco e o perdeu.
data-filledPresente quando o controle tem um valor.
data-focusedPresente enquanto o controle tem foco.

FieldStatus

Um ícone que reflete a validade do campo. É decorativo, já que a mensagem de erro carrega o significado.

AtributoDescrição
data-slot="field-status"Seleciona o ícone de status no CSS.

FieldCounter

PropTipoPadrão
threshold
number10% of maxLength, at most 20
announcementMensagem para leitores de tela quando a contagem cruza o limite ou atinge o máximo.
(remaining: number) => string–
AtributoDescrição
data-slot="field-counter"Seleciona o contador no CSS.
data-state="near" | "limit"Presente dentro do limite e no máximo.

FieldDescription

PropTipoPadrão
render
ReactElement | (props, state) => ReactElement<p>
AtributoDescrição
data-slot="field-description"Seleciona as descrições no CSS.
data-disabledPresente quando o campo está desativado.
data-validPresente quando o campo é válido.
data-invalidPresente quando o campo é inválido.
data-dirtyPresente depois que o valor mudou em relação ao inicial.
data-touchedPresente depois que o controle recebeu foco e o perdeu.
data-filledPresente quando o controle tem um valor.
data-focusedPresente enquanto o controle tem foco.

FieldError

PropTipoPadrão
matchExibe apenas para este problema de validade. true sempre exibe.
boolean | "valueMissing" | "typeMismatch" | "tooShort" | "tooLong" | "patternMismatch" | "rangeOverflow" | "rangeUnderflow" | "stepMismatch" | "badInput" | "customError" | "valid"–
errorsErros de uma biblioteca de formulários ou do servidor. Exibidos quando a lista tem uma mensagem.
Array<{ message?: string } | undefined>–
childrenO padrão é a mensagem de validação.
ReactNode–
render
ReactElement | (props, state) => ReactElement<div>
AtributoDescrição
data-slot="field-error"Seleciona os erros no CSS.
data-starting-stylePresente enquanto o erro cresce.
data-ending-stylePresente enquanto o erro colapsa.
data-disabledPresente quando o campo está desativado.
data-validPresente quando o campo é válido.
data-invalidPresente quando o campo é inválido.
data-dirtyPresente depois que o valor mudou em relação ao inicial.
data-touchedPresente depois que o controle recebeu foco e o perdeu.
data-filledPresente quando o controle tem um valor.
data-focusedPresente enquanto o controle tem foco.

FieldContent

Empilha um rótulo, uma descrição e um erro ao lado de um controle em um campo horizontal.

PropTipoPadrão
render
ReactElement | (props, state) => ReactElement<div>

FieldTitle

Um título com estilo de rótulo para conteúdo dentro de um <FieldLabel />, como cards de escolha.

PropTipoPadrão
render
ReactElement | (props, state) => ReactElement<div>

FieldGroup

Espaça os campos e é o contêiner que os campos responsivos medem.

PropTipoPadrão
indicatorAplica-se a todo campo dentro.
"required" | "optional" | null–
render
ReactElement | (props, state) => ReactElement<div>

FieldSet

PropTipoPadrão
indicatorAplica-se a todo campo dentro.
"required" | "optional" | null–
disabledDesativa todos os campos dentro.
booleanfalse
render
ReactElement | (props, state) => ReactElement<fieldset>
AtributoDescrição
data-slot="field-set"Seleciona os fieldsets no CSS.
data-disabledPresente quando o fieldset está desativado.

FieldLegend

PropTipoPadrão
variantlabel corresponde ao tamanho de um rótulo de campo.
"legend" | "label""legend"
render
ReactElement | (props, state) => ReactElement<div>
AtributoDescrição
data-slot="field-legend"Seleciona as legends no CSS.
data-variantA variante atual.

FieldSeparator

Um <Separator /> com espaçamento para formulários, e aceita todas as suas props.

PropTipoPadrão
childrenTexto opcional exibido no meio da linha.
ReactNode–
alignOnde o texto fica ao longo da linha.
"start" | "center" | "end""center"
decorativeOculta uma linha simples dos leitores de tela quando é apenas visual.
booleanfalse
render
ReactElement | (props, state) => ReactElement<div>
AtributoDescrição
data-slot="field-separator"Seleciona os separadores de campo no CSS.
data-contentPresente quando o separador tem texto.
data-slot="separator-label"O elemento que envolve o texto.

FieldItem

Envolve um checkbox ou radio e seu rótulo dentro de um grupo, para que cada item possa ser desativado individualmente.

PropTipoPadrão
disabled
booleanfalse
render
ReactElement | (props, state) => ReactElement<div>

FieldValidity

Renderiza qualquer coisa a partir do estado de validade do campo, por exemplo um medidor de força ou um contador de caracteres.

PropTipoPadrão
children
(state: { validity, errors, error, value }) => ReactNode–

Relacionados

Usado em blocos

Blocos que se baseiam em Field.