Views

Form elements are styled using view files. You can use one of the supported CSS frameworks, such as Tailwind, Bootstrap, or Bulma; use Flick's default styles, or add your own. Let's see how.

CSS Frameworks

The easiest and fastest way to style your form is to use a supported CSS framework. Enter the name of the framework when instantiating Flick, and you're all set.

$form = new Flick\Flick('bootstrap');

If you're passing a $config array to Flick, just add views to your array and Flick will do the rest.

$config = [
    'views' => 'bootstrap'
];

$form = new Flick\Flick($config);

Tailwind CSS Configuration

When using Tailwind CSS, you need to configure it to scan Flick's template files. Otherwise, Tailwind will purge the form styles from your CSS.

Tailwind v4

Add the @source directive to your main CSS file:

@import "tailwindcss";

@source "../vendor/flickphp/flick/resources/views/tailwind";

Tailwind v3

Add Flick's templates to your tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.php',
    './vendor/flickphp/flick/resources/views/tailwind/**/*.php',
  ],
}

Default Views

If you don't define views, Flick will use its default views, which can be found at flick/resources/views. We do not recommend editing the view files in the flick package as they may be overwritten by an update. Instead, the best way to customize your views is to add your own files, as outlined below.

Default Flick Styles

When using Flick's default views (without specifying a CSS framework), include the Flick stylesheet to get a clean, minimal design out of the box.

Including the Stylesheet

Copy the CSS file to your public directory:

cp vendor/flickphp/flick/resources/views/flick/flick.css public/css/

Then include it in your HTML:

<link rel="stylesheet" href="/css/flick.css">

The stylesheet provides styling for all form elements including inputs, selects, checkboxes, radio buttons, file uploads, alerts, and breadcrumbs. It uses a neutral color palette with an indigo accent color that you can customize.

Add Your Custom Views

There are two ways to add custom views...

1. Uploading View Files

By far the easiest way to add your own views. Follow these steps to use your custom views.

1. Create an assets directory on your server, such as myFlickAssets
2. Create a views directory at myFlickAssets/views
3. Upload your view files into myFlickAssets/views
4. Add an assets key to the configuration array with the path to your assets directory.

From now on, Flick will load views from inside myFlickAssets/views when creating forms.

2. Creating a Service Provider

You can also install views in a Service Provider package. More on creating Service Providers.

View File Structure

There are several view files for field elements and alerts, which are organized in the following manner.

├── alerts/
│   ├── error.view.php
│   ├── info.view.php
│   ├── success.view.php
│   └── warning.view.php
├── boolean.view.php
├── boolean-group-label.view.php
├── boolean-inline.view.php
├── breadcrumbs.view.php
├── file.view.php
├── hidden.view.php
├── input.view.php
├── multistep-heading.view.php
├── multistep-review.view.php
├── multistep-submit.view.php
├── select.view.php
├── submit.view.php
└── textarea.view.php

Form Elements

Most view files are self-explanatory; however, there are three that are worth mentioning.

boolean

The boolean.view.php file is what you'll use for checkbox and radio elements.

boolean-inline

The boolean-inline.view.php file is what you'll use for checkbox and radio elements that have an inline CSS style applied to them.

boolean-group-label

The boolean-group-label.view.php file renders the shared label that sits above a group of checkboxes or radios built from a single field definition.

input

The input.view.php file is a catch-all, which is used for all remaining inputs, such as text, email, date, etc.

Alert Views

The /alerts directory contains the "alert" views, which you can manually show upon form error, success, or to display info or warning messages.

if ($form->ok()) {
    // will display alerts/success.view.php
    $form->successMessage('Thank you!');
} else {
    // will display alerts/error.view.php
    $form->errorMessage('Oops!');
}

View Variables

Most view variables should be self-explanatory, and will be filled automatically by Flick, so you generally won't need to worry about them. However, there is one that you may find handy: @attributes. We'll look at it below.

<div class="field">
    <!-- this block displays if a label is provided -->
    @label
    <label for="{{ id }}" class="label">
        {{ label }}
    </label>
    @endlabel

    <div class="control">
        <div class="select @attributes('multiple') is-multiple @endattributes">
            <select name="{{ name }}" id="{{ id }}" class="{{ classes }}@error is-danger@enderror" {{attributes}}>
                {{ options }}
            </select>
        </div>
    </div>

    <!-- js validation; PHP errors render here too -->
    <div id="has-error-{{ id }}" class="help is-danger" style="display:{{ error_display }}">@error{{ message }}@enderror</div>

    <!-- this block displays if help text is provided -->
    @help
    <div class="help">
        {{ help }}
    </div>
    @endhelp
</div>

After a PHP validation error, {{attributes}} includes aria-invalid="true" and aria-describedby="has-error-{id}". Put the error message in that has-error-{{ id }} element so screen readers can find it.

@attributes

• bool

We can use the @attributes variable to find out of a variable/attribute is present. In the following example, we're checking to see if the multiple attribute is present, and if so we'll add the is-multiple CSS class.

<div class="select @attributes('multiple') is-multiple @endattributes">
    <select name="{{ name }}" id="{{ id }}" class="{{ classes }}" {{attributes}}>
        {{ options }}
    </select>
</div>

Caching Views

You can cache your views for greater performance by adding a cache key to the Flick $config array. Read more about caching in the Configuration doc.

$config = [
    'assets' => __DIR__.'/myFlickAssets',
    'cache' => true
];