Adding anatomy section

marigold-ui · Oct 7, 2024 · f4ae32f · f4ae32f
1 parent 3f93d4e
commit f4ae32f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/docs/content/components/form/datefield/datefield.mdx b/docs/content/components/form/datefield/datefield.mdx
@@ -8,11 +8,17 @@ The `<DateField>` allows users to enter and edit date values using a keyboard. E
 
 The `<DateField>` segments are individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or date format, and offers an easy and error-free way to edit dates using the keyboard.
 
-## Import
+## Anatomy
 
-```tsx
-import { DateField } from '@marigold/components';
-```
+<Image
+  src="/datefield/datefield-anatomy.jpg"
+  alt="Anatomy of datefield"
+  width={800}
+  height={550}
+  className="mx-auto block"
+/>
+
+A date field consists of a label, and a group of segments representing each unit of a date and time (e.g. years, months, days). Each segment is individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or date format, and offers an easy and error-free way to edit dates using the keyboard.
 
 ## Appearance
 

diff --git a/docs/public/datefield/datefield-anatomy.jpg b/docs/public/datefield/datefield-anatomy.jpg