Editable

Editableは、インラインで編集可能なテキスト入力を取得するために使用されるコンポーネントです。

なんとかなれーッ！

<Editable.Root defaultValue="なんとかなれーッ！">
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>

使い方

import { Editable } from "@yamada-ui/react"

import { Editable } from "@/components/ui"

import { Editable } from "@workspaces/ui"

<Editable.Root>
  <Editable.Preview />
  <Editable.Input />
  <Editable.Textarea />
  <Editable.Control>
    <Editable.EditTrigger />
    <Editable.SubmitTrigger />
    <Editable.CancelTrigger />
  </Editable.Control>
</Editable.Root>

テキストエリアを使う

おやつ…って事!? それって最高じゃん!!

<Editable.Root defaultValue={`おやつ…って事!?\nそれって最高じゃん!!`}>
  <Editable.Preview />
  <Editable.Textarea />
</Editable.Root>

編集モードをデフォルトにする

編集モードをデフォルトにする場合は、startWithEditViewをtrueに設定します。

<Editable.Root defaultValue="なんとかなれーッ！" startWithEditView>
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>

フォーカスが外れた場合に変更を確定しない

フォーカスが外れた場合に変更を確定しない場合は、submitOnBlurをfalseに設定します。

なんとかなれーッ！

<Editable.Root defaultValue="なんとかなれーッ！" submitOnBlur={false}>
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>

フォーカス時に選択しない

フォーカス時にテキストを選択しない場合は、selectAllOnFocusをfalseに設定します。

なんとかなれーッ！

<Editable.Root defaultValue="なんとかなれーッ！" selectAllOnFocus={false}>
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>

ボーダーの色を変更する

ボーダーの色を変更する場合は、focusBorderColorまたはerrorBorderColorに値を設定します。

Custom focus border color

Custom error border color

<VStack>
  <Editable.Root
    defaultValue="Custom focus border color"
    focusBorderColor="green.500"
  >
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Editable.Root
    defaultValue="Custom error border color"
    errorBorderColor="orange.500"
    invalid
  >
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>
</VStack>

無効にする

無効にする場合は、disabledをtrueに設定します。

Your email address

Email address

Your email address

We'll never share your email.

<VStack>
  <Editable.Root defaultValue="Your email address" disabled>
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Field.Root
    disabled
    helperMessage="We'll never share your email."
    label="Email address"
  >
    <Editable.Root defaultValue="Your email address">
      <Editable.Preview />
      <Editable.Input />
    </Editable.Root>
  </Field.Root>
</VStack>

読み取り専用にする

読み取り専用にする場合は、readOnlyをtrueに設定します。

Your email address

Email address

Your email address

We'll never share your email.

<VStack>
  <Editable.Root defaultValue="Your email address" readOnly>
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Field.Root
    readOnly
    helperMessage="We'll never share your email."
    label="Email address"
  >
    <Editable.Root defaultValue="Your email address">
      <Editable.Preview />
      <Editable.Input />
    </Editable.Root>
  </Field.Root>
</VStack>

無効な入力にする

無効な入力にする場合は、invalidをtrueに設定します。

Your email address

Email address

Your email address

We'll never share your email.

<VStack>
  <Editable.Root defaultValue="Your email address" invalid>
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Field.Root
    invalid
    helperMessage="We'll never share your email."
    label="Email address"
  >
    <Editable.Root defaultValue="Your email address">
      <Editable.Preview />
      <Editable.Input />
    </Editable.Root>
  </Field.Root>
</VStack>

制御する

なんとかなれーッ！

<Editable.Root defaultValue="なんとかなれーッ！">
  <Editable.Preview />
  <Editable.Input />

  <Editable.Control>
    <Editable.EditTrigger>
      <IconButton
        size="xs"
        variant="ghost"
        aria-label="Edit"
        icon={<PencilIcon />}
      />
    </Editable.EditTrigger>
    <Editable.SubmitTrigger>
      <IconButton
        size="xs"
        variant="outline"
        aria-label="Submit"
        icon={<CheckIcon />}
      />
    </Editable.SubmitTrigger>
    <Editable.CancelTrigger>
      <IconButton
        size="xs"
        variant="outline"
        aria-label="Cancel"
        icon={<XIcon />}
      />
    </Editable.CancelTrigger>
  </Editable.Control>
</Editable.Root>

制御をカスタマイズする

なんとかなれーッ！

const CustomControls = () => {
  const { getCancelProps, getEditProps, getSubmitProps } = Editable.useContext()
  return (
    <ButtonGroup.Root size="xs">
      <ButtonGroup.IconItem
        icon={<PencilIcon />}
        {...getEditProps()}
        variant="ghost"
        aria-label="Edit"
      />

      <ButtonGroup.IconItem
        icon={<CheckIcon />}
        {...getSubmitProps()}
        variant="outline"
        aria-label="Submit"
      />

      <ButtonGroup.IconItem
        icon={<XIcon />}
        {...getCancelProps()}
        variant="outline"
        aria-label="Cancel"
      />
    </ButtonGroup.Root>
  )
}

return (
  <Editable.Root defaultValue="なんとかなれーッ！" previewFocusable={false}>
    <Editable.Preview />
    <Editable.Input />
    <CustomControls />
  </Editable.Root>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Editable.Root

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`children`	-	`ReactNodeOrFunction<EditableElementProps>` The editable children to use.
`defaultValue`	-	`string` The initial value of the Editable in both edit & preview mode.
`disabled`	`false`	`boolean` If `true`, the field will be disabled.
`errorBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is invalid.
`focusBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is focused.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`onCancel`	-	`(preValue: string) => void` Callback invoked when user cancels input with the `Esc` key. It provides the last confirmed value as argument.
`onChange`	-	`(value: string) => void` A callback invoked when user changes input.
`onEdit`	-	`() => void` A callback invoked once the user enters edit mode.
`onSubmit`	-	`(value: string) => void` A callback invoked when user confirms value with `enter` key or by blurring input.
`placeholder`	-	`string` The placeholder text when the value is empty.
`previewFocusable`	`true`	`boolean` If `true`, the read only view, has a `tabIndex` set to `0` so it can receive focus via the keyboard or click.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`selectAllOnFocus`	`true`	`boolean` If `true`, the input's text will be highlighted on focus.
`startWithEditView`	-	`boolean` If `true`, the Editable will start with edit mode by default.
`submitOnBlur`	`true`	`boolean` If `true`, it'll update the value onBlur and turn off the edit mode.
`value`	-	`string` The value of the Editable in both edit & preview mode.

Editable.CancelTrigger

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Editable.Control

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Editable.EditTrigger

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Editable.Input

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Editable.Preview

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Editable.SubmitTrigger

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Editable.Textarea

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

アクセシビリティ

Field.Rootを使用しない場合は、Editable.Rootにaria-labelまたはaria-labelledbyを設定します。

<Editable.Root defaultValue="なんとかなれーッ！" aria-label="Feedback">
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>

<VStack gap="sm">
  <Text as="h3" id="label">
    Feedback
  </Text>

  <Editable.Root defaultValue="なんとかなれーッ！" aria-labelledby="label">
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>
</VStack>

キー	説明	状態
`Enter`	`Editable.Input`の場合、編集内容を確定します。	-
`Escape`	編集モードをキャンセルします。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Editable.Input`	`aria-describedby`	`Editable.Root`が`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-disabled`	`disabled`が設定されている場合は`"true"`を設定します。
	`aria-invalid`	`invalid`が設定されている場合は`"true"`を設定します。
	`aria-readonly`	`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-required`	`required`が設定されている場合は`"true"`を設定します。
`Editable.Textarea`	`aria-describedby`	`Editable.Root`が`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-disabled`	`disabled`が設定されている場合は`"true"`を設定します。
	`aria-invalid`	`invalid`が設定されている場合は`"true"`を設定します。
	`aria-readonly`	`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-required`	`required`が設定されている場合は`"true"`を設定します。
`Editable.Control`	`role="group"`	グループであることを示します。

類似のコンポーネント

Textareaは、複数行のテキスト入力を取得するために使用されるコンポーネントです。

PinInputは、ピンコードやOTP(ワンタイムパスワード)の入力を取得するために使用されるコンポーネントです。

PasswordInputは、表示・非表示の切り替えができるパスワード入力用のコンポーネントです。

NumberInputは、ユーザーからの数値入力を取得するために使用されるコンポーネントです。

Inputは、ユーザーからのテキスト入力を取得するために使用されるコンポーネントです。

FileInputは、ユーザーがファイルを選択するために使用されるコンポーネントです。

Autocompleteは、ユーザーのテキスト入力に応じて候補を表示するために使用されるコンポーネントです。

Switchは、オンとオフの状態を切り替えるために使用されるコンポーネントです。

使用しているコンポーネント・フック

Inputは、ユーザーからのテキスト入力を取得するために使用されるコンポーネントです。

Fieldは、フォーム要素に、ラベル、ヘルパーメッセージ、エラーメッセージなどをグループ化するために使用されるコンポーネントです。