BaseField Styling

Inline Methods

->fieldWidth(string $class)

• Named .tf-field-width in tall-theme.css, Default w-full sm:w-2/3 md:w-4/5;.
• $class replaces defaults.

->inline()

Display the label to the left of the field. Overrides the form component inline attribute.

->stacked()

Display the label above the field. Overrides the form component inline attribute.

->colspan(int $cols)

• Default 12 of 12 columns

->class(string $classes, $merge = true)

• Merge or replace classes on the field wrapper div

->labelClass(string $classes, $merge = true)

• Merge or replace the theme tall-forms-label class

Extend or override the blade component class

See Custom Field to understand the code structure and Blade Components for class names. The docs for each field type also states the name of the corresponding Blade class.

Theme

Most styling can be customized in the theme css file.

Override configs on individual fields

With these methods you merge OR override the field-attribute values set in the config file.

Input::make('Name')->labelAttr('bg-green-300') //merge with config
Input::make('Name')->labelAttr('bg-green-300', false) //replace config

Not just for styling, write Alpine in backend

The methods are not just for styling you can set any attributes on the elements. See another example on the Form Slots page.

Input::make('Name')
    ->rootAttr([
       'x-data' => "{ foo: 'bar'}",
       'class' => 'border rounded',
    ])
    ->inputAttr([
        'x-init' => "foo = 'baz'"
    ])
    ->required(),

->inputAttr()

• Read about it on the Attributes page

---

IMPORTANT!: Do NOT set any wire:model... with these methods, use wire() instead, otherwise, it will be applied twice.

->rootAttr(array $attributes, bool $mergeClasses = true)

• Override field-attribute['root'] in the config file

->beforeAttr(array $attributes, bool $mergeClasses = true)

• Override field-attribute['before'] in the config file

->beforeTextAttr(array $attributes, bool $mergeClasses = true)

• Override field-attribute['before-text'] in the config file

->aboveAttr(array $attributes, bool $mergeClasses = true)

• Override field-attribute['above'] in the config file

->belowAttr(array $attributes, bool $mergeClasses = true)

• Override field-attribute['below'] in the config file

->belowWrapperAttr(array $attributes, bool $mergeClasses = true)

• Override field-attribute['below-wrapper'] in the config file

->afterTextAttr(array $attributes, bool $mergeClasses = true)

• Override field-attribute['after-text'] in the config file

->afterLabelAttr(array $attributes, bool $mergeClasses = true)

• Override field-attribute['after-label'] in the config file

Theme

/* Labels */
    .tf-label {
        @apply my-1 block uppercase tracking-wide text-gray-600 text-xs font-bold;
    }
    .tf-label-suffix {
        @apply italic text-black text-opacity-25 text-xs;
    }
    .tf-after-label {
        @apply -mt-1 block text-sm leading-4 text-gray-500;
    }
    .tf-inline-label-alignment {
        @apply sm:pr-4 text-left;
    }
    .tf-stacked-label-alignment {
        @apply text-left;
    }
    .tf-label-width { /* for inline form layout */
        @apply sm:w-1/3 md:w-1/5;
    }
    .tf-label-field-wrapper-inline {
        @apply sm:flex;
    }
    .tf-label-field-wrapper-stacked {
        @apply w-full;
    }

    /* All Fields */
    .tf-fields-wrapper {
        @apply max-w-screen-lg mx-auto divide-gray-200 divide-y sm:grid sm:grid-cols-12;
    }
    .tf-field-width { /* for inline form layout */
        @apply w-full sm:w-2/3 md:w-4/5;
    }
    .tf-fields-root {
        /* do not add py-, my- or col-span-x here, see FieldRoot component. */
        @apply w-full;
    }
    .tf-fields-root-py-inarray {
        /* only vertical space here, see FieldRoot component */
        @apply py-0;
    }
    .tf-fields-root-py-not-inarray {
        /* only vertical space here, see FieldRoot component */
        @apply py-6 sm:py-5;
    }
    .tf-fields-before {
        @apply my-4 w-full border border-gray-200;
    }
    .tf-fields-before-text {
        @apply block text-sm leading-5 text-gray-700 p-2;
    }
    .tf-fields-above {
        @apply leading-4 text-gray-500 text-sm sm:pt-1;
    }
    .tf-fields-below {
        @apply leading-tight text-gray-500 text-sm;
    }
    .tf-fields-below-wrapper {
        /* null */
    }
    .tf-fields-after {
        @apply my-4 w-full border border-gray-200;
    }
    .tf-fields-after-text {
        @apply block text-sm leading-5 text-gray-700 p-2;
    }