[component]

Dev Mode
EditableCard
Description
An editable card summarizes saved information in a compact row and gives the user a way to edit it. It wraps a Card, which provides the card surface, and adds an optional leading icon, a title with an optional badge, a description, helper text, and an edit button.
Home Address
Verified
123 Main Street, Springfield, IL 62704
Last updated 2 days ago
Usage Guidelines
Do
Use an editable card to show a short summary of saved information the user can edit.
Set attention to highlight a card whose information needs review.
Keep the description to a short summary; move longer content into its own screen or modal.
Don't
Do not use an editable card as a generic surface for arbitrary content. Use a container Card instead.
Do not put a form or multi-step flow inside an editable card. Open a modal or screen from onEdit.
Accessibility
Set editAccessibilityLabel to describe what is being edited, e.g. "Edit home address". It defaults to the generic "Edit".
The edit button is only rendered when onEdit is provided, so cards without an edit action expose no interactive element.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Card, Badge, IconButton
Examples
States
Default, attention, and minimal editable cards. The icon, badge, helper text, and edit button are all optional.
Home Address
Verified
123 Main Street, Springfield, IL 62704
Last updated 2 days ago
Mailing Address
Needs review
456 Oak Avenue, Springfield, IL 62704
Confirm this address is still correct.
Preferred Name
No icon, badge, or helper text — just a title, description, and edit action.
LightAndDark
Editable cards adapt to both light and dark themes.
Light
Home Address
Verified
123 Main Street, Springfield, IL 62704
Last updated 2 days ago
Dark
Mailing Address
Needs review
456 Oak Avenue, Springfield, IL 62704
Confirm this address is still correct.