Editable

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

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

<Editable defaultValue="オッス！オラ悟空！" aria-label="Feedback">
  <EditablePreview />
  <EditableInput />
</Editable>

Copied!

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

  <Editable defaultValue="オッス！オラ悟空！" aria-labelledby="label">
    <EditablePreview />
    <EditableInput />
  </Editable>
</VStack>

Copied!

ARIA Roles and Attributes

Component	Role and Attributes	Usage
`EditableInput`	`aria-invalid`	Set to `"true"` if `isInvalid` is set.
	`aria-disabled`	Set to `"true"` if `isDisabled` is set.
	`aria-readonly`	Set to `"true"` if `isReadOnly` is set.
	`aria-required`	Set to `"true"` if `isRequired` is set.
`EditableTextarea`	`aria-invalid`	Set to `"true"` if `isInvalid` is set.
	`aria-disabled`	Set to `"true"` if `isDisabled` is set.
	`aria-readonly`	Set to `"true"` if `isReadOnly` is set.
	`aria-required`	Set to `"true"` if `isRequired` is set.

Edit this page on GitHub

PreviousSaturationSlider NextRating