OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Label

Displays a label element.

Name

 <Label>Name</Label>

API Reference

This component is based on the label element and supports common margin props m, mx, my, ml, mr, mt, mb. View source

Examples

Vertical flow

Password

 <Flex direction="column" gap="4">
  <Flex direction="column" gap="3">
    <Label htmlFor="vertical-email">Email</Label>
    <TextField.Root id="vertical-email" placeholder="Email" />
  </Flex>

  <Flex direction="column" gap="3">
    <Label htmlFor="vertical-password">Password</Label>
    <TextField.Root
      id="vertical-password"
      placeholder="Password"
      type="password"
    />
  </Flex>
</Flex>

Horizontal flow

Password

 <Flex direction="column" gap="4">
  <Grid align="center" columns="100px 1fr">
    <Label htmlFor="horizontal-email">Email</Label>
    <TextField.Root id="horizontal-email" placeholder="Email" />
  </Grid>

  <Grid align="center" columns="100px 1fr">
    <Label htmlFor="horizontal-password">Password</Label>
    <TextField.Root
      id="horizontal-password"
      placeholder="Password"
      type="password"
    />
  </Flex>
</Flex>