Fluxo UIFluxo UIv0.4.1

FieldLabel

A label component for form fields with support for required, optional, and error states.

Basic Label

Basic Label

Simple field label

Required Field

Required Field

Label with required indicator

Optional Field

Optional Field

Label with optional indicator

Error State

Error State

Label in error state

Disabled State

Disabled State

Label in disabled state

Combined States

Combined States

Multiple form fields with different label states

Import

import { FieldLabel } from 'fluxo-ui';

Usage

Basic Usage

import { FieldLabel, TextInput } from 'fluxo-ui';

function MyComponent() {
  return (
    <div>
      <FieldLabel htmlFor="email">Email Address</FieldLabel>
      <TextInput id="email" placeholder="Enter your email" />
    </div>
  );
}

Advanced Usage

import { FieldLabel, TextInput } from 'fluxo-ui';

function MyComponent() {
  return (
    <div className="space-y-4">
      <div>
        <FieldLabel htmlFor="required-field" required>
          Username
        </FieldLabel>
        <TextInput id="required-field" placeholder="Required field" />
      </div>

      <div>
        <FieldLabel htmlFor="optional-field" optional>
          Middle Name
        </FieldLabel>
        <TextInput id="optional-field" placeholder="Optional field" />
      </div>

      <div>
        <FieldLabel htmlFor="error-field" error>
          Password
        </FieldLabel>
        <TextInput id="error-field" placeholder="Invalid input" />
      </div>
    </div>
  );
}

Props

htmlFor
string

Associates the label with a form control

childrenreq
ReactNode

Label content

required
booleanfalse

Shows required indicator

optional
booleanfalse

Shows optional indicator

disabled
booleanfalse

Disabled state styling

error
booleanfalse

Error state styling

className
string

Additional CSS classes

Features

Required Indicator

Shows a visual asterisk marker for required form fields

Optional Indicator

Displays an "(optional)" badge for non-mandatory fields

Error State

Applies error styling and color to indicate invalid input

Disabled State

Muted styling for disabled or read-only form fields

Accessibility

htmlFor prop properly associates labels with form controls for screen readers

Theming

Full dark/light and 5 brand themes via CSS variables — zero extra config