Label

Installation

Package

@bigbang/ui

Import

import { Label } from '@bigbang/ui';

Source

Label.tsx

Storybook

Label · Playground

Label is in the @bigbang/ui package.

import { Label } from '@bigbang/ui';

<Label htmlFor="name" required>Field label</Label>
<input id="name" required />

Props

required

Description

The control is required: with necessityIndicator 'required' the label gets * and a visually hidden "zorunlu" or "required". Set required on the control too.

Type

boolean

Default

false

necessityIndicator

Description

Which fields a form marks: 'required' marks required fields, 'optional' adds "(isteğe bağlı)" or "(optional)" to the others. A form uses one convention.

Type

'required' | 'optional'

Default

'required'

htmlFor

Description

The id of the control this label names. Not needed when the control is inside the label.

Type

string

size

Description

Text size: 12 or 14 px, the label text styles.

Type

'sm' | 'md'

Default

'md'

disabled

Description

Shows the label faded with a not-allowed cursor; disable the control itself too.

Type

boolean

Default

false

className

Description

For layout only: margins and alignment.

Type

string

childrenRequired

Description

The label text, or the label text with the control inside it.

Type

ReactNode

Other <label> attributes such as id and onClick pass through.

Data attributes

• data-component="label": on the root <label>.
• data-disabled: when disabled is set.
• data-part="necessity": on the necessity marker.