components

LabeledInput

LabeledInput is a generic wrapper that adds a label and optional error message to any form input. It handles the label positioning, required indicator, optional text, and error state styling that all Breeze form fields share. Most Breeze form components (InputText, InputSelect, etc.) already include label and error support via their own props. Use LabeledInput when you need to wrap a custom or third-party input that doesn't have built-in label support.

Import

import { LabeledInput } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Wrap a custom or third-party input with Breeze label styling.
+When using native HTML inputs that need consistent label treatment.

When not to use

−For Breeze form components (InputText, InputSelect, etc.) — they have built-in label support.
−When the input already provides its own label.

Examples

Code Samples

Basic LabeledInput

Wrapping a native input with a Breeze label.

import { LabeledInput } from "@skedulo/breeze-ui-react";

export default function BasicLabeledInput() {
  return (
    <LabeledInput label="Custom Field" required>
      <input
        type="text"
        placeholder="Enter value..."
        className="border border-gray-300 rounded px-3 py-1.5 text-sm w-full"
      />
    </LabeledInput>
  );
}

With Error State

Showing a validation error message below the input.

import { LabeledInput } from "@skedulo/breeze-ui-react";

export default function ErrorLabeledInput() {
  return (
    <LabeledInput label="Email" invalid error="Please enter a valid email address">
      <input
        type="email"
        value="invalid-email"
        className="border border-red-300 rounded px-3 py-1.5 text-sm w-full"
      />
    </LabeledInput>
  );
}

Guidelines

Do

✓Use required to show the required indicator.
✓Use optional to show '(optional)' text.
✓Pass error and invalid together for validation.

Don't

✗Don't wrap Breeze inputs — they handle labels internally.
✗Don't use both required and optional on the same field.

API Reference

Prop	Type	Default	Description
label	ReactNode	—	Field label rendered above or beside the input.
error	ReactNode	—	Error message displayed below the input.
invalid	boolean	false	Applies error styling to the wrapper.
required	boolean	false	Shows a required indicator on the label.
optional	boolean	false	Shows "(optional)" text on the label.
disabled	boolean	false	Applies disabled styling to the wrapper.
labelPosition	string	—	Position of the label relative to the input.
size	string	—	Size variant for the wrapper.

Related Components

Input Text Input Select Input Checkbox