この記事の概要

Ark UIのFieldコンポーネントを触っていて、初見の際に困ったことがあったので備忘録がてら記事にしました。

ほぼタイトル通りですがField.ErrorTextはField.Rootにinvalidが渡っていないと表示されません。

Ark UIは色々なフレームワークで使えますが、この記事での例示コードはReactです。

コード

公式ドキュメントに記載されているコードは以下の通りです。

Input.tsx

import { Field } from '@ark-ui/react/field'

export const Input = () => {
  return (
    <Field.Root>
      <Field.Label>Label</Field.Label>
      <Field.Input />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

こうして作成したコンポーネントを単に呼び出した場合HelperTextは表示されますがErrorTextは表示されません。

SomePage.tsx

import { Input } from "path/to/Input"

const SomePage = () => {
  return (
    // 他の要素
    <Input />
  )
}

Field.Rootにinvalidが渡って初めてErrorTextが描画されます。

Input.tsx

  import { Field } from '@ark-ui/react/field'

- export const Input = () => {
+ export const Input = (props: Field.RootProps) => { 
    return (
-     <Field.Root>
+     <Field.Root invalid={props.invalid}>
        <Field.Label>Label</Field.Label>
        <Field.Input />
        <Field.HelperText>Some additional Info</Field.HelperText>
        <Field.ErrorText>Error Info</Field.ErrorText>
      </Field.Root>
    )
  }

SomePage.tsx

  import { Input } from "path/to/Input"

  const SomePage = () => {
    return (
      // 他の要素
-     <Input />
+     <Input invalid />
    )
  }

実際はinvalidを渡す際はstateなりcontextなりの値を使用すると思いますが、簡略化しています。

参考