# Label

```ts
import { Label } from 'cx/widgets';
```

The `Label` component renders a label element. It's typically used with form fields, but can also be used standalone.

```tsx
import { Label } from "cx/widgets";

export default (
  <div className="flex flex-col items-start gap-2">
    <Label>Standard Label</Label>
    <Label asterisk required>
      Required Field
    </Label>
  </div>
);

```

## Form Field Labels

Most form fields support a `label` prop that can be configured in multiple ways:

| Format | Example                                  | Description               |
| ------ | ---------------------------------------- | ------------------------- |
| String | `label="Name"`                           | Simple text label         |
| Object | `label={{ text: "Name", style: "..." }}` | Label with custom styling |
| JSX    | `label={<Checkbox>Enable</Checkbox>}`    | Custom JSX content        |

Use `asterisk` and `required` on form fields to show a required indicator next to the label.

To automatically show asterisks on all required fields, add this to your initialization code:

```tsx
Label.prototype.asterisk = true;
```

The following example shows a styled label and a checkbox used as a label that enables/disables the field:

```tsx
import { createModel } from "cx/data";
import { LabelsLeftLayout, LabelsTopLayout, expr } from "cx/ui";
import { Checkbox, TextField } from "cx/widgets";

interface PageModel {
  enabled: boolean;
  value: string;
  name: string;
}

const m = createModel<PageModel>();

export default (
  <LabelsTopLayout>
    <TextField
      value={m.name}
      label={{
        text: "Styled Label",
        style: "color: blue; font-weight: bold",
      }}
    />
    <TextField
      value={m.value}
      label={
        <Checkbox value={m.enabled} disabled={false}>
          Unique Name
        </Checkbox>
      }
      disabled={expr(m.enabled, (enabled) => !enabled)}
    />
  </LabelsTopLayout>
);

```

## Configuration

| Property    | Type               | Description                                              |
| ----------- | ------------------ | -------------------------------------------------------- |
| `text`      | `string`           | Text content of the label. Supports data binding.        |
| `asterisk`  | `boolean`          | Set to `true` to add a red asterisk for required fields. |
| `required`  | `boolean`          | Alias for `asterisk`.                                    |
| `baseClass` | `string`           | Base CSS class. Default is `label`.                      |
| `className` | `string`           | Additional CSS class to apply.                           |
| `style`     | `string \| object` | Additional styles to apply.                              |