[component]

Dev Mode
Tap to edit
Description
This element allows the user to see information and interact with an icon to edit it. See the pattern here.
Name
Santa Claus !
Usage Guidelines
Do
Display the information that will be edited.
If needed, update the font color to font-link.
Don't
Do not replace the icon.
Accessibility
The user should be able to tab to the tap-to-edit icon and press enter/space to interact with it.
The user should be able to tap the label as well to interact with the element.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Tap to edit pattern, Address tap-to-edit pattern
Examples
Tap to edit
Text
text
Text Area
Dunder Mifflin ipsum dolor sit amet, beet farm consectetur adipiscing elit. That's what she said. Regional Manager Michael Scott, always I want people to be afraid of how much they love me. Bears, beets, Battlestar Galactica. Assistant to the Regional Manager Dwight Schrute identity theft is not a joke, Jim! Millions of families suffer every year! Fact. Bears eat beets. Bears, beets, Battlestar Galactica. Did I stutter? Sometimes I'll start a sentence and I don't even know where it's going. I just hope I find it along the way. I am Beyonce, always. I'm not superstitious, but I am a little stitious. You miss 100% of the shots you don't take - Wayne Gretzky - Michael Scott. Through concentration, I can raise and lower my cholesterol at will. Why are you the way that you are? I declare bankruptcy! How the turntables... If I can't scuba, the
Boolean
Yes
Select
Option1
Multi Select
Option2
Address
555 N Street Ave Apt 402 New York, New York 12345
URL
en.wikipedia.org
Number
12345
Email
email@example.com
Custom Select
Option1
Phone Number
Second Phone Number
+18885551212
Date (with initial value)
2024-01-15
DateTime (with initial value)
2024-01-15T14:30:00
Time (with initial value)
14:30:00
Date (empty - test clear button)