Editable

Editable is a component used to obtain inline editable text input.

なんとかなれーッ！

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

Usage

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>

Use Textarea

To enable multiple lines, use Editable.Textarea.

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

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

Make Edit Mode Default

To make edit mode default, set startWithEditView to true.

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

Disable Submit on Blur

To prevent submitting changes when focus is lost, set submitOnBlur to false.

なんとかなれーッ！

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

Disable Text Selection on Focus

To prevent text selection when focused, set selectAllOnFocus to false.

なんとかなれーッ！

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

Change Border Color

To change the border color, set a color to focusBorderColor or 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>

Disable

To disable, set disabled to 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>

Read-Only

To read-only, set readOnly to 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

To make the input invalid, set invalid to 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>

Control

なんとかなれーッ！

<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>

Control

なんとかなれーッ！

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>
)

If you use this code, you need to add "use client" to the top of the file.

Props

Editable.Root

Prop	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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.

Accessibility

If you are not using Field.Root, set aria-label or aria-labelledby to Editable.Root.

<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>

Key	Description	State
`Enter`	Submits the edit for `Editable.Input`.	-
`Escape`	Cancels the edit mode.	-

ARIA Roles and Attributes

Component	Role and Attributes	Usage
`Editable.Input`	`aria-describedby`	If `Editable.Root` is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.
	`aria-disabled`	Set to `"true"` if `disabled` is set.
	`aria-invalid`	Set to `"true"` if `invalid` is set.
	`aria-readonly`	Set to `"true"` if `readOnly` is set.
	`aria-required`	Set to `"true"` if `required` is set.
`Editable.Textarea`	`aria-describedby`	If `Editable.Root` is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.
	`aria-disabled`	Set to `"true"` if `disabled` is set.
	`aria-invalid`	Set to `"true"` if `invalid` is set.
	`aria-readonly`	Set to `"true"` if `readOnly` is set.
	`aria-required`	Set to `"true"` if `required` is set.
`Editable.Control`	`role="group"`	Indicates that this is a group.