Source: https://app-studio-6167b.web.app/docs/Label

Repository module

# Label

A semantic text element designed for form labels and descriptive text with comprehensive typography options, accessibility features, and flexible styling. Perfect for form fields, section headers, and any text that needs semantic meaning.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label.tsx)

> This module is available in the repository and is not exported from the published package. The example uses its repository import path. For application forms, use the [TextField](https://app-studio-6167b.web.app/docs/TextField) label prop.

## Import

```ts
import { Label } from 'src/components/Form/Label/Label';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Label } from 'src/components/Form/Label/Label';
import { Vertical } from 'app-studio';

export function LabelExample() {
  return (
    <Vertical gap={8}>
      <Label htmlFor="docs-label-input">Workspace</Label>
      <input id="docs-label-input" placeholder="Your workspace" />
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Label**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L6) |
| `heading` | `Headings` `"h1"``"h2"``"h3"``"h4"``"h5"``"h6"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L8) |
| `isItalic` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L10) |
| `isStriked` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L12) |
| `isUnderlined` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L14) |
| `size` | `number \| Sizes` | `'sm'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L16) |
| `weight` | `TextWeights` `"light"``"medium"``"normal"``"thin"``"bold"``"black"``"hairline"``"semiBold"``"extraBold"` | `'normal'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L18) |
| `htmlFor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L20) |
| `dropDown` | `ViewProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L22) |
| `error` | `string \| boolean` | `—` | Validation error displayed for the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L25) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L29) |
| `helperText` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Additional guidance displayed with the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L32) |
| `views` | `ViewProps` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L35) |

Common inherited styling props (7)

**Label inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.