label

unovue · Jul 15, 2023 · fdd24de · fdd24de
1 parent b194109
commit fdd24de
Showing 1 changed file with 20 additions and 19 deletions.
diff --git a/docs/content/components/label.md b/docs/content/components/label.md
@@ -10,18 +10,14 @@ import Description from '../../components/Description.vue'
 import HeroContainer from '../../components/HeroContainer.vue'
 import DemoLabel from '../../components/demo/Label/index.vue'
 import PropsTable from '../../components/tables/PropsTable.vue'
-import EmitsTable from '../../components/tables/EmitsTable.vue'
-import DataAttributesTable from '../../components/tables/DataAttributesTable.vue'
-import KeyboardTable from '../../components/tables/KeyboardTable.vue'
 import Highlights from '../../components/Highlights.vue'
 import HeroCodeGroup from '../../components/HeroCodeGroup.vue'
 </script>
 
 # Label
 
 <Description>
-A modal dialog that interrupts the user with important content and expects a
-response.
+Renders an accessible label associated with controls.
 </Description>
 
 <HeroContainer>
@@ -37,40 +33,45 @@ response.
 </template>
 </HeroContainer>
 
-```
+## Features
+
 <Highlights
-  features={[
+  :features="[
     'Text selection is prevented when double clicking label.',
     'Supports nested controls.',
-  ]}
+  ]"
 />
-```
+
 ## Installation
 
 Install the component from your command line.
 
 ```bash
-npm install @radix-ui/react-label
+npm install radix-vue
 ```
 
 ## Anatomy
 
 Import the component.
 
-```jsx
-import * as Label from '@radix-ui/react-label';
+```vue
+<script setup>
+import { Label } from 'radix-vue';
+</script>
 
-export default () => <Label.Root />;
+<template>
+  <Label />
+</template>
 ```
 
 ## API Reference
 
 ### Root
 
 Contains the content for the label.
-```
+
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -79,13 +80,13 @@ Contains the content for the label.
       description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our <a href=&quot;/guides/composition&quot;>Composition</a> guide for more details.',
     },
     {
-      name: 'htmlFor',
+      name: 'for',
       type: 'string',
       description: 'The id of the element the label is associated with.',
     },
-  ]}
+  ]"
 />
-```
+
 ## Accessibility
 
-This component is based on the native `label` element, it will automatically apply the correct labelling when wrapping controls or using the `htmlFor` attribute. For your own custom controls to work correctly, ensure they use native elements such as `button` or `input` as a base.
+This component is based on the native `label` element, it will automatically apply the correct labelling when wrapping controls or using the `for` attribute. For your own custom controls to work correctly, ensure they use native elements such as `button` or `input` as a base.