Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

Editable

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

Source@yamada-ui/editable

Import

import {
  Editable,
  EditableInput,
  EditablePreview,
  EditableTextarea,
} from "@yamada-ui/react"
Copied!
  • Editable: A wrapper component that controls child elements (EditableInput, EditableTextarea, EditablePreview).
  • EditablePreview: A component that displays the value of the text input.
  • EditableInput: A component that captures text input. It is displayed when EditablePreview is clicked or focused.
  • EditableTextarea: A component that captures multi-line text input. It is displayed when EditablePreview is clicked or focused.

Usage

Editable example

<Editable defaultValue="オッス！オラ悟空！">
  <EditablePreview />
  <EditableInput />
</Editable>
Copied!

For multi-line cases, use EditableTextarea.

Editable example

<Editable
  defaultValue={`私の戦闘力は530000です。\nですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……`}
>
  <EditablePreview />
  <EditableTextarea h="2lh" />
</Editable>
Copied!

Change Border Color

To change the border color, set a color to focusBorderColor or errorBorderColor.

Editable example

<Editable focusBorderColor="green.500" defaultValue="custom border color">
  <EditablePreview />
  <EditableInput />
</Editable>
Copied!

Disable

To disable, set isDisabled to true.

Editable example

<Editable isDisabled defaultValue="your email address">
  <EditablePreview />
  <EditableInput />
</Editable>
Copied!

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

<Editable isReadOnly defaultValue="your email address">
  <EditablePreview />
  <EditableInput />
</Editable>
Copied!

Make Input Invalid

To make the input invalid, set isInvalid to true.

Editable example

<Editable isInvalid defaultValue="your email address">
  <EditablePreview />
  <EditableInput />
</Editable>
Copied!

Control

Editable example

const CustomControls = () => {
  const { isEditing, getSubmitProps, getCancelProps, getEditProps } =
    useEditableControl()

  return isEditing ? (
    <ButtonGroup size="sm" gap="sm">
      <IconButton icon={<CheckIcon />} {...getSubmitProps()} />
      <IconButton icon={<XIcon />} {...getCancelProps()} />
    </ButtonGroup>
  ) : (
    <ButtonGroup size="sm" gap="sm">
      <IconButton icon={<PenIcon />} {...getEditProps()} />
    </ButtonGroup>
  )
}

return (
  <Editable
    display="flex"
    gap="sm"
    isPreviewFocusable={false}
    defaultValue="オッス！オラ悟空！"
  >
    <EditablePreview w="full" />
    <EditableInput />
    <CustomControls />
  </Editable>
)
Copied!

Use React Hook Form

Editable example

type Data = { input: string; textarea: string }

const defaultValues: Data = {
  input: "",
  textarea: "",
}

const {
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm<Data>({ defaultValues })

const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data)

console.log("watch:", watch())

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <Fieldset
      isInvalid={!!errors.input}
      legend="Name"
      errorMessage={errors.input ? errors.input.message : undefined}
    >
      <Controller
        name="input"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field }) => (
          <Editable placeholder="孫悟空" {...field}>
            <EditablePreview />
            <EditableInput />
          </Editable>
        )}
      />
    </Fieldset>

    <Fieldset
      isInvalid={!!errors.textarea}
      legend="Feedback"
      errorMessage={errors.textarea ? errors.textarea.message : undefined}
    >
      <Controller
        name="textarea"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field }) => (
          <Editable
            placeholder={`私の戦闘力は530000です。\nですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……`}
            {...field}
          >
            <EditablePreview />
            <EditableTextarea h="2lh" />
          </Editable>
        )}
      />
    </Fieldset>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

Edit this page on GitHub

PreviousSaturationSliderNextRating