> ## Documentation Index
> Fetch the complete documentation index at: https://nova.laravel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Fields

> Nova ships with a variety of fields out of the box, including fields for text inputs, booleans, dates, file uploads, Markdown, and more.

## Defining Fields

Each Nova resource contains a `fields` method. This method returns an array of fields, which generally extend the `Laravel\Nova\Fields\Field` class. Nova ships with a variety of fields out of the box, including fields for text inputs, booleans, dates, file uploads, Markdown, and more.

To add a field to a resource, you may simply add it to the resource's `fields` method. Typically, fields may be created using their static `make` method. This method accepts several arguments; however, you usually only need to pass the "human readable" name of the field. Nova will automatically "snake case" this string to determine the underlying database column:

```php theme={null}
use Laravel\Nova\Fields\ID;
use Laravel\Nova\Fields\Text;

/**
 * Get the fields displayed by the resource.
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function fields(NovaRequest $request)
{
    return [
        ID::make()->sortable(),
        Text::make('Name')->sortable(),
    ];
}
```

### Field Column Conventions

As noted above, Nova will "snake case" the displayable name of the field to determine the underlying database column. However, if necessary, you may pass the column name as the second argument to the field's `make` method:

```php theme={null}
Text::make('Name', 'name_column'),
```

If the field has a JSON, `ArrayObject`, or array cast assigned to it, you may use the `->` operator to specify nested properties within the field:

```php theme={null}
Timezone::make('User Timezone', 'settings->timezone'),
```

## Showing / Hiding Fields

Often, you will only want to display a field in certain situations. For example, there is typically no need to show a `Password` field on a resource index listing. Likewise, you may wish to only display a `Created At` field on the creation / update forms. Nova makes it a breeze to hide / show fields on certain pages.

The following methods may be used to show / hide fields based on the display context:

* `showOnIndex`
* `showOnDetail`
* `showOnCreating`
* `showOnUpdating`
* `showOnPreview`
* `showWhenPeeking`
* `hideFromIndex`
* `hideFromDetail`
* `hideWhenCreating`
* `hideWhenUpdating`
* `onlyOnIndex`
* `onlyOnDetail`
* `onlyOnForms`
* `exceptOnForms`

You may chain any of these methods onto your field's definition in order to instruct Nova where the field should be displayed:

```php theme={null}
Text::make('Name')->hideFromIndex(),
```

Alternatively, you may pass a callback to the following methods.

* `showOnIndex`
* `showOnDetail`
* `showOnCreating`
* `showOnUpdating`
* `showWhenPeeking`
* `hideFromIndex`
* `hideFromDetail`
* `hideWhenCreating`
* `hideWhenUpdating`
* `showOnPreview`
* `onlyOnPreview`

For `show*` methods, the field will be displayed if the given callback returns `true`:

```php theme={null}
Text::make('Name')->showOnIndex(function (NovaRequest $request, $resource) {
    return $this->name === 'Taylor Otwell';
}),
```

For `hide*` methods, the field will be hidden if the given callback returns `true`:

```php theme={null}
Text::make('Name')->hideFromIndex(function (NovaRequest $request, $resource) {
    return $this->name === 'Taylor Otwell';
}),
```

### Showing Fields When Peeking

You may allow a field to be visible [when peeking at the resource](./relationships#peeking-at-belongsto-relationships) by invoking the `showWhenPeeking` method when defining the field:

```php theme={null}
Text::make('Name')->showWhenPeeking(),
```

### Resource Preview Modal

You may also define which fields should be included in the resource's "preview" modal. This modal can be displayed for a given resource by the user when viewing the resource's index:

```php theme={null}
Text::make('Title')->showOnPreview(),

Markdown::make('Content')->showOnPreview(),
```

Alternatively, you may pass a callback to the `showOnPreview` method:

```php theme={null}
Markdown::make('Content')->showOnPreview(function (NovaRequest $request, $resource) {
    return $request->user()->can('previewContent');
}),
```

<Frame>
  <img src="https://mintcdn.com/nova-laravel/bY_66OSFONsRO54M/images/resource-preview.png?fit=max&auto=format&n=bY_66OSFONsRO54M&q=85&s=2f56c0f45e3281ed44f722f6d76f9b4a" alt="Resource Preview" width="1406" height="684" data-path="images/resource-preview.png" />
</Frame>

## Dynamic Field Methods

If your application requires it, you may specify a separate list of fields for specific display contexts. For example, imagine you have a resource with the following list of fields:

```php theme={null}
/**
 * Get the fields displayed by the resource.
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function fields(NovaRequest $request)
{
    return [
        Text::make('First Name'),
        Text::make('Last Name'),
        Text::make('Job Title'),
    ];
}
```

On your detail page, you may wish to show a combined name via a computed field, followed by the job title. In order to do this, you could add a `fieldsForDetail` method to the resource class which returns a separate list of fields that should only be displayed on the resource's detail page:

```php theme={null}
/**
 * Get the fields displayed by the resource on detail page.
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function fieldsForDetail(NovaRequest $request)
{
    return [
        Text::make('Name', function () {
            return sprintf('%s %s', $this->first_name, $this->last_name);
        }),

        Text::make('Job Title'),
    ];
}
```

The available methods that may be defined for individual display contexts are:

* `fieldsForIndex`
* `fieldsForDetail`
* `fieldsForInlineCreate`
* `fieldsForCreate`
* `fieldsForUpdate`
* `fieldsForPreview`

<Note>
  The `fieldsForIndex`, `fieldsForDetail`, `fieldsForInlineCreate`, `fieldsForCreate`,`fieldsForUpdate`, and `fieldsForPreview` methods always take precedence over the `fields` method.
</Note>

## Default Values

There are times you may wish to provide a default value to your fields. Nova offers this functionality via the `default` method, which accepts a value or callback. This value will be used as the field's default input value on the resource's creation view:

```php theme={null}
BelongsTo::make('Name')->default($request->user()->getKey()),

Text::make('Uuid')->default(function ($request) {
    return Str::orderedUuid();
}),
```

## Field Placeholder Text

By default, the placeholder text of a field will be it's name. You can override the placeholder text of a field that supports placeholders by using the `placeholder` method:

```php theme={null}
Text::make('Name')->placeholder('My New Post'),
```

## Field Hydration

On every create or update request that Nova receives for a given resource, each field's corresponding model attribute will automatically be filled before the model is persisted to the database. If necessary, you may customize the hydration behavior of a given field using the `fillUsing` method:

```php theme={null}
Text::make('Name', 'name')
    ->fillUsing(function ($request, $model, $attribute, $requestAttribute) {
        $model->{$attribute} = Str::title($request->input($attribute));
    }),
```

## Field Panels

If your resource contains many fields, your resource "detail" page can become crowded. For that reason, you may choose to break up groups of fields into their own "panels":

<Frame>
  <img src="https://mintcdn.com/nova-laravel/ISBJ63muGLVA9l3K/images/panels.png?fit=max&auto=format&n=ISBJ63muGLVA9l3K&q=85&s=1bd22bbc252d06098f1b6fe7b6d4fdd1" alt="Field Panel Example" width="1968" height="2044" data-path="images/panels.png" />
</Frame>

You may accomplish this by creating a new `Panel` instance within the `fields` method of a resource. Each panel requires a name and an array of fields that belong to that panel:

```php theme={null}
use Laravel\Nova\Panel;

/**
 * Get the fields displayed by the resource.
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function fields(NovaRequest $request)
{
    return [
        ID::make()->sortable(),

        Panel::make('Address Information', $this->addressFields()),
    ];
}

/**
 * Get the address fields for the resource.
 *
 * @return array
 */
protected function addressFields()
{
    return [
        Text::make('Address', 'address_line_1')->hideFromIndex(),
        Text::make('Address Line 2')->hideFromIndex(),
        Text::make('City')->hideFromIndex(),
        Text::make('State')->hideFromIndex(),
        Text::make('Postal Code')->hideFromIndex(),
        Country::make('Country')->hideFromIndex(),
    ];
}
```

You may limit the amount of fields shown in a panel by using the `limit` method:

```php theme={null}
Panel::make('Profile', [
    Text::make('Full Name'),
    Date::make('Date of Birth'),
    Text::make('Place of Birth'),
])->limit(1),
```

Panels with a defined field limit will display a **Show All Fields** button in order to allow the user to view all of the defined fields when needed.

## Sortable Fields

When attaching a field to a resource, you may use the `sortable` method to indicate that the resource index may be sorted by the given field:

```php theme={null}
Text::make('Name', 'name_column')->sortable(),
```

## Field Types

<Note>
  This portion of the documentation only discusses non-relationship fields. To learn more about relationship fields, [check out their documentation](./relationships).
</Note>

Nova ships with a variety of field types. So, let's explore all of the available types and their options:

* [Audio](#audio-field)
* [Avatar](#avatar-field)
* [Badge](#badge-field)
* [Boolean](#boolean-field)
* [Boolean Group](#boolean-group-field)
* [Code](#code-field)
* [Color](#color-field)
* [Country](#country-field)
* [Currency](#currency-field)
* [Date](#date-field)
* [DateTime](#datetime-field)
* [Email](#email-field)
* [File](#file-field)
* [Gravatar](#gravatar-field)
* [Heading](#heading-field)
* [Hidden](#hidden-field)
* [ID](#id-field)
* [Image](#image-field)
* [KeyValue](#keyvalue-field)
* [Markdown](#markdown-field)
* [MultiSelect](#multiselect-field)
* [Number](#number-field)
* [Password](#password-field)
* [Password Confirmation](#password-confirmation-field)
* [Select](#select-field)
* [Slug](#slug-field)
* [Sparkline](#sparkline-field)
* [Status](#status-field)
* [Stack](#stack-field)
* [Tag](#tag-field)
* [Text](#text-field)
* [Textarea](#textarea-field)
* [Timezone](#timezone-field)
* [Trix](#trix-field)
* [UI-Avatar](#ui-avatar-field)
* [URL](#url-field)
* [Vapor File](#vapor-file-field)
* [Vapor Image](#vapor-image-field)

### Audio Field

The `Audio` field extends the [File field](#file-field) and accepts the same options and configurations. The `Audio` field, unlike the `File` field, will display a thumbnail preview of the underlying image when viewing the resource:

<Frame>
  <img src="https://mintcdn.com/nova-laravel/ISBJ63muGLVA9l3K/images/audio-field.png?fit=max&auto=format&n=ISBJ63muGLVA9l3K&q=85&s=3b170391f22b6add81f49db07dad3956" alt="Audio Field" width="1928" height="756" data-path="images/audio-field.png" />
</Frame>

```php theme={null}
use Laravel\Nova\Fields\Audio;

Audio::make('Theme Song'),
```

By default, the `Audio` field allows the user to download the linked file. To disable downloads, you may use the `disableDownload` method on the field definition:

```php theme={null}
Audio::make('Theme Song')->disableDownload(),
```

You can set the [preload attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#attr-preload) of the field by using the `preload` method:

```php theme={null}
Audio::make('Theme Song')->preload('auto'),

Audio::make('Theme Song')->preload(Audio::PRELOAD_METADATA),
```

<Note>
  To learn more about defining file fields and handling uploads, check out the comprehensive [file field documentation](./file-fields).
</Note>

### Avatar Field

The `Avatar` field extends the [Image field](#image-field) and accepts the same options and configuration:

```php theme={null}
use Laravel\Nova\Fields\Avatar;

Avatar::make('Avatar'),
```

If a resource contains an `Avatar` field, that field will be displayed next to the resource's title when the resource is displayed in search results:

<Frame>
  <img src="https://mintcdn.com/nova-laravel/ISBJ63muGLVA9l3K/images/avatar-search-results.png?fit=max&auto=format&n=ISBJ63muGLVA9l3K&q=85&s=290747bfd4b24d0591798d552728841f" alt="Avatar Search Results" width="1334" height="448" data-path="images/avatar-search-results.png" />
</Frame>

You may use the `squared` method to display the image's thumbnail with squared edges. Additionally, you may use the `rounded` method to display its thumbnails with fully-rounded edges:

```php theme={null}
Avatar::make('Avatar')->squared(),
```

### Badge Field

The `Badge` field can be used to display the status of a `Resource` in the index and detail views:

```php theme={null}
use Laravel\Nova\Fields\Badge;

Badge::make('Status', function () {
    return User::statuses[$this->status];
}),
```

By default, the `Badge` field supports four variations: `info`, `success`, `danger`, and `warning`. You may define your possible field values and their associated badge types using the `map` method:

```php theme={null}
Badge::make('Status')->map([
    'draft' => 'danger',
    'published' => 'success',
]),
```

Alternatively, you may use the `types` method to completely replace the built-in badge types and their associated CSS classes. The CSS classes may be provided as a string or an array:

```php theme={null}
Badge::make('Status')->types([
    'draft' => 'font-medium text-gray-600',
    'published' => ['font-bold', 'text-green-600'],
]),
```

If you only wish to supplement the built-in badge types instead of overwriting all of them, you may use the `addTypes` method:

```php theme={null}
Badge::make('Status')->addTypes([
    'draft' => 'custom classes',
]),
```

<Note>
  By default the `Badge` field is not shown on a resource's edit or update pages. If you wish to modify the underlying value represented by the `Badge` field on your edit forms, define another field in combination with the `onlyOnForms` field option.
</Note>

If you'd like to display your badge with an associated icon, you can use the `withIcons` method to direct Nova to display an icon:

```php theme={null}
Badge::make('Status')->map([
    'draft' => 'danger',
    'published' => 'success',
])->withIcons(),
```

If you'd like to customize the icons used when display `Badge` fields you can use the `icons` method:

```php theme={null}
Badge::make('Status')->map([
    'draft' => 'danger',
    'published' => 'success',
])->icons([
    'danger' => 'exclamation-circle',
    'success' => 'check-circle',
]),
```

If you'd like to customize the label that is displayed you can use the `label` method:

```php theme={null}
Badge::make('Status')->map([
    'draft' => 'danger',
    'published' => 'success',
])->label(function ($value) {
    return __($value);
}),
```

You may provide a list of labels using the `labels` method:

```php theme={null}
Badge::make('Status')->map([
    'draft' => 'danger',
    'published' => 'success',
])->labels([
    'draft' => 'Draft',
    'published' => 'Published',
]),
```

### Boolean Field

The `Boolean` field may be used to represent a boolean / "tiny integer" column in your database. For example, assuming your database has a boolean column named `active`, you may attach a `Boolean` field to your resource like so:

```php theme={null}
use Laravel\Nova\Fields\Boolean;

Boolean::make('Active'),
```

#### Customizing True / False Values

If you are using values other than `true`, `false`, `1`, or `0` to represent "true" and "false", you may instruct Nova to use the custom values recognized by your application. To accomplish this, chain the `trueValue` and `falseValue` methods onto your field's definition:

```php theme={null}
Boolean::make('Active')
    ->trueValue('On')
    ->falseValue('Off'),
```

### Boolean Group Field

The `BooleanGroup` field may be used to group a set of Boolean checkboxes, which are then stored as JSON key-values in the database column they represent. You may create a `BooleanGroup` field by providing a set of keys and labels for each option:

```php theme={null}
use Laravel\Nova\Fields\BooleanGroup;

BooleanGroup::make('Permissions')->options([
    'create' => 'Create',
    'read' => 'Read',
    'update' => 'Update',
    'delete' => 'Delete',
]),
```

The user will be presented with a grouped set of checkboxes which, when saved, will be converted to JSON format:

```json theme={null}
{
  "create": true,
  "read": false,
  "update": false,
  "delete": false
}
```

Before using this field type, you should ensure that the underlying Eloquent attribute is configured to cast to an `array` (or equivalent) within your Eloquent model class:

```php theme={null}
protected $casts = [
    'permissions' => 'array'
];
```

Sometimes, you may wish to exclude values that are `true` or `false` from display to avoid cluttering the representation of the field. You may accomplish this by invoking the `hideFalseValues` or `hideTrueValues` methods on the field definition:

```php theme={null}
BooleanGroup::make('Permissions')->options([
    'create' => 'Create',
    'read' => 'Read',
    'update' => 'Update',
    'delete' => 'Delete',
])->hideFalseValues(),

BooleanGroup::make('Permissions')->options([
    'create' => 'Create',
    'read' => 'Read',
    'update' => 'Update',
    'delete' => 'Delete',
])->hideTrueValues(),
```

If the underlying field is empty, Nova will display "No Data". You may customize this text using the `noValueText` method:

```php theme={null}
BooleanGroup::make('Permissions')->options([
    'create' => 'Create',
    'read' => 'Read',
    'update' => 'Update',
    'delete' => 'Delete',
])->noValueText('No permissions selected.'),
```

### Code Field

The `Code` fields provides a beautiful code editor within your Nova administration panel. Generally, code fields should be attached to `TEXT` database columns:

```php theme={null}
use Laravel\Nova\Fields\Code;

Code::make('Snippet'),
```

You may also attach `Code` fields to `JSON` database columns. By default, the field will display the value as a JSON string. You may cast the underlying Eloquent attribute to `array`, `collection`, `object`, or `json` based on your application's needs:

```php theme={null}
use Laravel\Nova\Fields\Code;

Code::make('Options')->json(),
```

<Note>
  By default, Nova will never display a `Code` field on a resource index listing.
</Note>

#### Editing JSON

If you intend to use a given `Code` field instance to only edit JSON, you may chain the `json` method onto your field definition:

```php theme={null}
Code::make('Options')->json(),
```

<Note>
  Nova does not automatically apply the `json` validation rule to `Code` fields. This rule must be manually specified during validation if you wish for it to be applied.
</Note>

#### Syntax Highlighting

You may customize the language syntax highlighting of the `Code` field using the `language` method:

```php theme={null}
Code::make('Snippet')->language('php'),
```

The `Code` field's currently supported languages are:

* `dockerfile`
* `htmlmixed`
* `javascript`
* `markdown`
* `nginx`
* `php`
* `ruby`
* `sass`
* `shell`
* `sql`
* `twig`
* `vim`
* `vue`
* `xml`
* `yaml-frontmatter`
* `yaml`

### Color Field

The `Color` field generates a color picker using the HTML5 `color` input element:

```php theme={null}
use Laravel\Nova\Fields\Color;

Color::make('Color', 'label_color'),
```

### Country Field

The `Country` field generates a `Select` field containing a list of the world's countries. The field will store the country's corresponding two-letter code:

```php theme={null}
use Laravel\Nova\Fields\Country;

Country::make('Country', 'country_code'),
```

### Currency Field

The `Currency` field generates a `Number` field that is automatically formatted using the `brick/money` PHP package. Nova will use `USD` as the default currency; however, this can be changed by modifying the `nova.currency` configuration value:

```php theme={null}
use Laravel\Nova\Fields\Currency;

Currency::make('Price'),
```

You may override the currency on a per-field basis using the `currency` method:

```php theme={null}
Currency::make('Price')->currency('EUR'),
```

<Note>
  The `ext-intl` PHP extension is required to display formatted currency. Or, you may install the `symfony/polyfill-intl-icu` Composer package which offers support for the "en" locale.
</Note>

You may use the `min`, `max`, and `step` methods to set their corresponding attributes on the generated `input` control:

```php theme={null}
Currency::make('price')->min(1)->max(1000)->step(0.01),
```

<Note>
  If you plan to customize the currency "step" amount using the `step` method, you should ensure you always call the `step` method after the `currency`, `asMinorUnits`, and `asMajorUnits` methods. Calling these methods after the `step` method will override the `step` method's behavior.
</Note>

The field's locale will respect the value in your application's `app.locale` configuration value. You can override this behavior by providing a locale code to the `locale` method:

```php theme={null}
Currency::make('Price')->locale('fr'),
```

### Date Field

The `Date` field may be used to store a date value (without time). For more information about dates and timezones within Nova, check out the additional [date / timezone documentation](./date-fields):

```php theme={null}
use Laravel\Nova\Fields\Date;

Date::make('Birthday'),
```

### DateTime Field

The `DateTime` field may be used to store a date-time value. For more information about dates and timezones within Nova, check out the additional [date / timezone documentation](./date-fields):

```php theme={null}
use Laravel\Nova\Fields\DateTime;

DateTime::make('Updated At')->hideFromIndex(),
```

### Email Field

The `Email` field may be used to display a column with a `mailto:` link on the index and detail views:

```php theme={null}
use Laravel\Nova\Fields\Email;

Email::make(),

Email::make('Customer Email', 'customer_email'),
```

### File Field

To learn more about defining file fields and handling uploads, please refer to the comprehensive [file field documentation](./file-fields).

```php theme={null}
use Laravel\Nova\Fields\File;

File::make('Attachment'),
```

### Gravatar Field

The `Gravatar` field does not correspond to any column in your application's database. Instead, it will display the "Gravatar" image of the model it is associated with.

By default, the Gravatar URL will be generated based on the value of the model's `email` column. However, if your user's email addresses are not stored in the `email` column, you may pass a custom column name to the field's `make` method:

```php theme={null}
use Laravel\Nova\Fields\Gravatar;

// Using the "email" column...
Gravatar::make(),

// Using the "email_address" column...
Gravatar::make('Avatar', 'email_address'),
```

You may use the `squared` method to display the image's thumbnail with squared edges. Additionally, you may use the `rounded` method to display the images with fully-rounded edges:

```php theme={null}
Gravatar::make('Avatar', 'email_address')->squared(),
```

### Heading Field

The `Heading` field does not correspond to any column in your application's database. It is used to display a banner across your forms and can function as a separator for long lists of fields:

<Frame>
  <img src="https://mintcdn.com/nova-laravel/ISBJ63muGLVA9l3K/images/heading-field.png?fit=max&auto=format&n=ISBJ63muGLVA9l3K&q=85&s=1f5830819c9ac1d0e9ebe8fb2859c800" alt="Heading Field" width="2120" height="490" data-path="images/heading-field.png" />
</Frame>

```php theme={null}
use Laravel\Nova\Fields\Heading;

Heading::make('Meta'),
```

If you need to render HTML content within the `Heading` field, you may invoke the `asHtml` method when defining the field:

```php theme={null}
Heading::make('<p class="text-red-500">* All fields are required.</p>')->asHtml(),
```

<Note>
  `Heading` fields are automatically hidden from the resource index page.
</Note>

### Hidden Field

The `Hidden` field may be used to pass any value that doesn't need to be changed by the user but is required for saving the resource:

```php theme={null}
Hidden::make('Slug'),

Hidden::make('Slug')->default(Str::random(64)),
```

Combined with [default values](#default-values), `Hidden` fields are useful for passing things like related IDs to your forms:

```php theme={null}
Hidden::make('User', 'user_id')->default(function ($request) {
    return $request->user()->id;
}),
```

### ID Field

The `ID` field represents the primary key of your resource's database table. Typically, each Nova resource you define should contain an `ID` field. By default, the `ID` field assumes the underlying database column is named `id`; however, you may pass the column name as the second argument to the `make` method if necessary:

```php theme={null}
use Laravel\Nova\Fields\ID;

ID::make(),

ID::make('ID', 'id_column'),
```

If your application contains very large integer IDs, you may need to use the `asBigInt` method in order for the Nova client to correctly render the integer:

```php theme={null}
ID::make()->asBigInt(),
```

<Note>
  There should only be one `ID` field configured per resource.
</Note>

### Image Field

The `Image` field extends the [File field](#file-field) and accepts the same options and configurations. The `Image` field, unlike the `File` field, will display a thumbnail preview of the underlying image when viewing the resource:

```php theme={null}
use Laravel\Nova\Fields\Image;

Image::make('Photo'),
```

By default, the `Image` field allows the user to download the linked file. To disable downloads, you may use the `disableDownload` method on the field definition:

```php theme={null}
Image::make('Photo')->disableDownload(),
```

You may use the `squared` method to display the image's thumbnail with squared edges. Additionally, you may use the `rounded` method to display its thumbnails with fully-rounded edges.

<Note>
  To learn more about defining file fields and handling uploads, check out the comprehensive [file field documentation](./file-fields).
</Note>

### KeyValue Field

The `KeyValue` field provides a convenient interface to edit flat, key-value data stored inside `JSON` column types. For example, you might store profile information inside a [JSON column type](https://laravel.com/docs/eloquent-mutators#array-and-json-casting) named `meta`:

```php theme={null}
use Laravel\Nova\Fields\KeyValue;

KeyValue::make('Meta')->rules('json'),
```

Given the field definition above, the following interface would be rendered by Nova:

<Frame>
  <img src="https://mintcdn.com/nova-laravel/ISBJ63muGLVA9l3K/images/key-value-field.png?fit=max&auto=format&n=ISBJ63muGLVA9l3K&q=85&s=c0b4dd046d365134db6a4b4239678f8a" alt="Key/Value Field" width="2144" height="818" data-path="images/key-value-field.png" />
</Frame>

#### Customizing KeyValue Labels

You can customize the text values used in the component by calling the `keyLabel`, `valueLabel`, and `actionText` methods when defining the field. The `actionText` method customizes the "add row" button text:

```php theme={null}
KeyValue::make('Meta')
    ->keyLabel('Item')
    ->valueLabel('Label')
    ->actionText('Add Item'),
```

<Note>
  By default, Nova will never display a `KeyValue` field on a resource index listing.
</Note>

If you would like to disable the user's ability to edit the keys of the field, you may use the `disableEditingKeys` method to accomplish this. Disabling editing keys with the `disableEditingKeys` method will automatically disable adding rows as well:

```php theme={null}
KeyValue::make('Meta')->disableEditingKeys(),
```

You may also remove the user's ability to add new rows to the field by chaining the `disableAddingRows` method onto the field's definition:

```php theme={null}
KeyValue::make('Meta')->disableAddingRows(),
```

In addition, you may also wish to remove the user's ability to delete exisiting rows in the field. You may accomplish this by invoking the `disableDeletingRows` method when defining the field:

```php theme={null}
KeyValue::make('Meta')->disableDeletingRows(),
```

### Markdown Field

The `Markdown` field provides a WYSIWYG Markdown editor for its underlying Eloquent attribute. Typically, this field will correspond to a `TEXT` column in your database. The `Markdown` field will store the raw Markdown text within the associated database column:

```php theme={null}
use Laravel\Nova\Fields\Markdown;

Markdown::make('Biography'),
```

By default, Markdown fields will not display their content when viewing a resource's detail page. Instead, the content will be hidden behind a "Show Content" link that will reveal the field's content when clicked. You may specify that the Markdown field should always display its content by calling the `alwaysShow` method on the field itself:

```php theme={null}
Markdown::make('Biography')->alwaysShow(),
```

The Markdown field uses the `league/commonmark` package to parse Markdown content. By default, it uses a parsing strategy similar to GitHub Flavoured Markdown, which does not allow certain HTML within the Markdown content. However, you can change the parsing strategy using the `preset` method. Currently, the following built-in presets are `default`, `commonmark`, and `zero`:

```php theme={null}
Markdown::make('Biography')->preset('commonmark'),
```

Using the `preset` method, you may register and use custom preset implementations:

```php theme={null}
use Illuminate\Support\Str;
use Laravel\Nova\Fields\Markdown;
use Laravel\Nova\Fields\Markdown\MarkdownPreset;

Markdown::make('Biography')->preset('github', new class implements MarkdownPreset {
    /**
     * Convert the given content from markdown to HTML.
     *
     * @param  string  $content
     * @return string
     */
    public function convert(string $content)
    {
        return Str::of($content)->markdown([
            'html_input' => 'strip',
        ]);
    }
}),
```

#### Markdown File Uploads

If you would like to allow users to drag-and-drop photos into the `Markdown` field, you may chain the `withFiles` method onto the field's definition. When calling the `withFiles` method, you should pass the name of the [filesystem disk](https://laravel.com/docs/filesystem) that photos should be stored on:

```php theme={null}
use Laravel\Nova\Fields\Markdown;

Markdown::make('Biography')->withFiles('public'),
```

Nova will define two database tables to store pending and persisted `Field` uploads. These two tables will be created automatically when you run Nova's migrations during installation: `nova_pending_field_attachments` and `nova_field_attachments`.

Finally, in your `routes/console.php` file, you should register a [daily scheduled task](https://laravel.com/docs/scheduling) to prune any stale attachments from the pending attachments table and storage. For convenience, Laravel Nova provides the job implementation needed to accomplish this:

```php theme={null}
use Illuminate\Support\Facades\Schedule;
use Laravel\Nova\Fields\Attachments\PruneStaleAttachments;

Schedule::call(new PruneStaleAttachments)->daily();
```

### MultiSelect Field

The `MultiSelect` field provides a `Select` field that allows multiple selection options. This field pairs nicely with model attributes that are cast to `array` or equivalent:

```php theme={null}
use Laravel\Nova\Fields\MultiSelect;

MultiSelect::make('Sizes')->options([
    'S' => 'Small',
    'M' => 'Medium',
    'L' => 'Large',
]),
```

On the resource index and detail pages, the `MultiSelect` field's "key" value will be displayed. If you would like to display the label values instead, you may invoke the `displayUsingLabels` method when defining the field:

```php theme={null}
MultiSelect::make('Size')->options([
    'S' => 'Small',
    'M' => 'Medium',
    'L' => 'Large',
])->displayUsingLabels(),
```

You may also display multi-select options in groups by providing an array structure that contains keys and `label` / `group` pairs:

```php theme={null}
MultiSelect::make('Sizes')->options([
    'MS' => ['label' => 'Small', 'group' => "Men's Sizes"],
    'MM' => ['label' => 'Medium', 'group' => "Men's Sizes"],
    'WS' => ['label' => 'Small', 'group' => "Women's Sizes"],
    'WM' => ['label' => 'Medium', 'group' => "Women's Sizes"],
])->displayUsingLabels(),
```

### Number Field

The `Number` field provides an `input` control with a `type` attribute of `number`:

```php theme={null}
use Laravel\Nova\Fields\Number;

Number::make('price'),
```

You may use the `min`, `max`, and `step` methods to set the corresponding HTML attributes on the generated `input` control:

```php theme={null}
Number::make('price')->min(1)->max(1000)->step(0.01),
```

You may also allow arbitrary-precision decimal values:

```php theme={null}
Number::make('price')->min(1)->max(1000)->step('any'),
```

### Password Field

The `Password` field provides an `input` control with a `type` attribute of `password`:

```php theme={null}
use Laravel\Nova\Fields\Password;

Password::make('Password'),
```

The `Password` field will automatically preserve the password that is currently stored in the database if the incoming password field is empty. Therefore, a typical password field definition might look like the following:

```php theme={null}
use Illuminate\Validation\Rules;

Password::make('Password')
    ->onlyOnForms()
    ->creationRules('required', Rules\Password::defaults())
    ->updateRules('nullable', Rules\Password::defaults()),
```

### Password Confirmation Field

The `PasswordConfirmation` field provides an input that can be used for confirming another `Password` field. This field will only be shown on forms and will not attempt to hydrate an underlying attribute on the Eloquent model:

```php theme={null}
PasswordConfirmation::make('Password Confirmation'),
```

When using this field, you should define the appropriate validation rules on the corresponding `Password` field:

```php theme={null}
Password::make('Password')
    ->onlyOnForms()
    ->creationRules('required', Rules\Password::defaults(), 'confirmed')
    ->updateRules('nullable', Rules\Password::defaults(), 'confirmed'),

PasswordConfirmation::make('Password Confirmation'),
```

### Select Field

The `Select` field may be used to generate a drop-down select menu. The `Select` menu's options may be defined using the `options` method:

```php theme={null}
use Laravel\Nova\Fields\Select;

Select::make('Size')->options([
    'S' => 'Small',
    'M' => 'Medium',
    'L' => 'Large',
]),
```

On the resource index and detail pages, the `Select` field's "key" value will be displayed. If you would like to display the labels instead, you may use the `displayUsingLabels` method:

```php theme={null}
Select::make('Size')->options([
    'S' => 'Small',
    'M' => 'Medium',
    'L' => 'Large',
])->displayUsingLabels(),
```

You may also display `Select` options in groups by providing an array structure that contains keys and `label` / `group` pairs:

```php theme={null}
Select::make('Size')->options([
    'MS' => ['label' => 'Small', 'group' => 'Men Sizes'],
    'MM' => ['label' => 'Medium', 'group' => 'Men Sizes'],
    'WS' => ['label' => 'Small', 'group' => 'Women Sizes'],
    'WM' => ['label' => 'Medium', 'group' => 'Women Sizes'],
])->displayUsingLabels(),
```

If you need more control over the generation of the `Select` field's options, you may provide a closure to the `options` method:

```php theme={null}
Select::make('Size')->options(function () {
    return array_filter([
        Size::SMALL => Size::MAX_SIZE === SIZE_SMALL ? 'Small' : null,
        Size::MEDIUM => Size::MAX_SIZE === SIZE_MEDIUM ? 'Medium' : null,
        Size::LARGE => Size::MAX_SIZE === SIZE_LARGE ? 'Large' : null,
    ]);
}),
```

#### Searchable Select Fields

At times it's convenient to be able to search or filter the list of options available in a `Select` field. You can enable this by invoking the `searchable` method on the field:

```php theme={null}
Select::make('Size')->searchable()->options([
    'S' => 'Small',
    'M' => 'Medium',
    'L' => 'Large',
])->displayUsingLabels(),
```

After marking a select field as `searchable`, Nova will display an `input` field which allows you to filter the list of options based on its label:

<Frame>
  <img src="https://mintcdn.com/nova-laravel/bY_66OSFONsRO54M/images/searchable-select.png?fit=max&auto=format&n=bY_66OSFONsRO54M&q=85&s=3bcc1f71422606e31fdbf105b8a6da84" alt="Searchable Select Fields" width="954" height="462" data-path="images/searchable-select.png" />
</Frame>

### Slug Field

Sometimes you may need to generate a unique, human-readable identifier based on the contents of another field, such as when generating a "slug" for a blog post title. You can automatically generate these "slugs" using the `Slug` field:

```php theme={null}
Slug::make('Slug')->from('Title'),
```

By default, the field will convert a string like 'My Blog Post' to a slug like 'my-blog-post'. If you would like the field to use underscores instead of dashes, you may use the `separator` method to define your own custom "separator":

```php theme={null}
Slug::make('Slug')->from('Title')->separator('_'),
```

### Sparkline Field

The `Sparkline` field may be used to display a small line chart on a resource's index or detail page. The data provided to a `Sparkline` may be provided via an `array`, a `callable` (which returns an array), or an instance of a `Trend` metric class:

```php theme={null}
// Using an array...
Sparkline::make('Post Views')->data([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]),

// Using a callable...
Sparkline::make('Post Views')->data(function () {
    return json_decode($this->views_data);
}),
```

#### Using Trend Metrics

If the data needed by your `Sparkline` field requires complicated database queries to compute, you may wish to encapsulate the data retrieval within a [trend metric](./../metrics/defining-metrics) which can then be provided to the `Sparkline` field:

```php theme={null}
Sparkline::make('Post Views')->data(new PostViewsOverTime($this->id)),
```

In the example above, we're providing the post's `id` to the metric's constructor. This value will become the `resourceId` property of the request that is available within the trend metric. For example, within the metric, we could access this post ID via `$request->resourceId`:

```php theme={null}
return $this->countByDays(
    $request,
    PostView::where('post_id', '=', $request->resourceId)
);
```

<Note>
  When providing data to a `Sparkline` field via a trend metric, the `Sparkline` field will always use the first range defined in the `ranges` method of the metric.
</Note>

#### Customizing the Chart

If a bar chart better suits your data, you may invoke the `asBarChart` method when defining the field:

```php theme={null}
Sparkline::make('Post Views')
           ->data([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
           ->asBarChart(),
```

By default, a `Sparkline` will appear on a resource's detail page. You can customize the dimensions of the chart using the `height` and `width` methods:

```php theme={null}
Sparkline::make('Post Views')
           ->data([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
           ->height(200)
           ->width(600),
```

### Status Field

The `Status` field may be used to display a "progress state" column. Internally, Nova uses the `Status` field to indicate the current state (waiting, running, or finished) of queued actions. However, you are free to use this field for your own purposes as needed:

<Frame>
  <img src="https://mintcdn.com/nova-laravel/bY_66OSFONsRO54M/images/status-field-waiting.png?fit=max&auto=format&n=bY_66OSFONsRO54M&q=85&s=2d8e718bafad08c76794240ba7c8c21d" alt="Status Field Example" width="1958" height="418" data-path="images/status-field-waiting.png" />
</Frame>

The `loadingWhen` and `failedWhen` methods may be used to instruct the field which words indicate a "loading" state and which words indicate a "failed" state. In this example, we will indicate that database column values of `waiting` or `running` should display a "loading" indicator:

```php theme={null}
use Laravel\Nova\Fields\Status;

Status::make('Status')
    ->loadingWhen(['waiting', 'running'])
    ->failedWhen(['failed']),
```

### Stack Field

As your resource classes grow, you may find it useful to be able to group fields together to simplify your index and detail views. A `Stack` field allows you to display fields like `BelongsTo`, `Text`, and others in a vertical orientation:

```php theme={null}
Stack::make('Details', [
    Text::make('Name'),
    Text::make('Slug')->resolveUsing(function () {
        return Str::slug(optional($this->resource)->name);
    }),
]),
```

<Frame>
  <img src="https://mintcdn.com/nova-laravel/bY_66OSFONsRO54M/images/stack-field.png?fit=max&auto=format&n=bY_66OSFONsRO54M&q=85&s=180f18b37311f543b59ef472531376be" alt="Stack Field" width="2120" height="926" data-path="images/stack-field.png" />
</Frame>

<Note>
  Stack fields are not shown on forms, and are only intended for stacking lines of text on the index and detail resource views.
</Note>

#### Line Fields

To gain more control over how the individual fields in a `Stack` are displayed, you may use the `Line` field, which provides methods for controlling the display of the line's text. `Line` fields offer the following presentational methods:

* `asHeading`
* `asSubTitle`
* `asSmall`
* `asBase`

<Frame>
  <img src="https://mintcdn.com/nova-laravel/bY_66OSFONsRO54M/images/stack-field-lines.png?fit=max&auto=format&n=bY_66OSFONsRO54M&q=85&s=5c64461dde867ae49644467ca11a63ec" alt="Line presentational methods" width="1304" height="856" data-path="images/stack-field-lines.png" />
</Frame>

In addition to the `Line` field's presentational methods, you may also pass any additional Tailwind classes to the field to customize the appearance of the `Line`:

```php theme={null}
Stack::make('Details', [
    Line::make('Title')->extraClasses('italic font-medium text-80'),
]),
```

#### Passing Closures to Line Fields

In addition to passing `BelongsTo`, `Text`, and `Line` fields to the `Stack` field, you may also pass a closure. The result of the closure will automatically be converted to a `Line` instance:

```php theme={null}
Stack::make('Details', [
    Line::make('Name')->asHeading(),
    fn () => optional($this->resource)->position
]),
```

### Tag Field

The `Tag` field allows you to search and attach `BelongsToMany` relationships using a tag selection interface. This field is useful for adding roles to users, tagging articles, assigning authors to books, and other similar scenarios:

```php theme={null}
use Laravel\Nova\Fields\Tag;

Tag::make('Tags'),
```

<Frame>
  <img src="https://mintcdn.com/nova-laravel/bY_66OSFONsRO54M/images/tag-field.png?fit=max&auto=format&n=bY_66OSFONsRO54M&q=85&s=d7f96a0296c34f236a8544586175b1a1" alt="Tag Field" width="1512" height="282" data-path="images/tag-field.png" />
</Frame>

`Tag` fields will be displayed in a dropdown on the index view:

<Frame>
  <img src="https://mintcdn.com/nova-laravel/bY_66OSFONsRO54M/images/tag-field-index.png?fit=max&auto=format&n=bY_66OSFONsRO54M&q=85&s=6173a30cb407f782cfd2422d60079b5e" alt="Tag Field on index views" width="744" height="502" data-path="images/tag-field-index.png" />
</Frame>

#### Previewing Tags

You may instruct the `Tag` field to allow previewing the tag's relation by invoking the `withPreview` method on the field. This will display the related resource's preview details in a modal:

```php theme={null}
use Laravel\Nova\Fields\Tag;

Tag::make('Tags')->withPreview(),
```

<Frame>
  <img src="https://mintcdn.com/nova-laravel/bY_66OSFONsRO54M/images/previewing-tags.png?fit=max&auto=format&n=bY_66OSFONsRO54M&q=85&s=70cdbd02e4def487388956e596beb813" alt="Previewing Tags" width="2092" height="694" data-path="images/previewing-tags.png" />
</Frame>

#### Displaying Tags as Lists

Instead of displaying your tags as an inline group, you may instead display your tags as a list:

```php theme={null}
use Laravel\Nova\Fields\Tag;

Tag::make('Tags')->displayAsList(),
```

This allows tags to be displayed with their title, subtitle, and a configured image field:

<Frame>
  <img src="https://mintcdn.com/nova-laravel/bY_66OSFONsRO54M/images/tag-field-list-index.png?fit=max&auto=format&n=bY_66OSFONsRO54M&q=85&s=667bf19c5c58a8e2ef6f26b331b54f36" alt="Tag field displayed as a list" width="812" height="624" data-path="images/tag-field-list-index.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/nova-laravel/bY_66OSFONsRO54M/images/tag-field-list-edit.png?fit=max&auto=format&n=bY_66OSFONsRO54M&q=85&s=6ff45771149f4eb3d5843af34ac6024a" alt="Tag field displayed as a list" width="1508" height="378" data-path="images/tag-field-list-edit.png" />
</Frame>

#### Creating New Tags Inline

For convenience, when `Tag` fields are shown on a resource create or update page, you may create the related resource inline via a modal window without leaving the creation / update page:

<Frame>
  <img src="https://mintcdn.com/nova-laravel/bY_66OSFONsRO54M/images/tag-field-with-create-relation.png?fit=max&auto=format&n=bY_66OSFONsRO54M&q=85&s=d572db70466b27d918a72590c8d1140e" alt="Creating Tags Inline" width="1508" height="282" data-path="images/tag-field-with-create-relation.png" />
</Frame>

To enable this functionality, invoke the `showCreateRelationButton` method when defining the field:

```php theme={null}
use Laravel\Nova\Fields\Tag;

Tag::make('Tags')->showCreateRelationButton(),
```

#### Adjusting the Inline Creation Modal's Size

You may adjust the size of the modal using the `modalSize` method:

```php theme={null}
// Can be "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl".
Tag::make('Tags')->showCreateRelationButton()->modalSize('7xl'),
```

#### Preloading Available Tags

To make existing tags more discoverable, you may show the user all available tags during resource creation or update by invoking the `preload` method when defining the field:

```php theme={null}
Tag::make('Tags')->preload(),
```

### Text Field

The `Text` field provides an `input` control with a `type` attribute of `text`:

```php theme={null}
use Laravel\Nova\Fields\Text;

Text::make('Name'),
```

Text fields may be further customized by setting any attribute on the field. This can be done by calling the `withMeta` method and providing an `extraAttributes` array containing key / value pairs of HTML attributes:

```php theme={null}
Text::make('Name')->withMeta([
    'extraAttributes' => [
        'placeholder' => 'David Hemphill',
    ],
]),
```

#### Text Field Suggestions

To offer auto-complete suggestions when typing into the `Text` field, you may invoke the `suggestions` method when defining the field. The `suggestions` method should return an `array` of suggestions:

```php theme={null}
Text::make('Name')->required()
    ->suggestions([
        'David Hemphill',
        'Taylor Otwell',
        'James Brooks',
    ]),
```

<Frame>
  <img src="https://mintcdn.com/nova-laravel/ISBJ63muGLVA9l3K/images/field-suggestions.png?fit=max&auto=format&n=ISBJ63muGLVA9l3K&q=85&s=89fd2afbcca3684d396529dc04cc8280" alt="Field Suggestions" width="1592" height="666" data-path="images/field-suggestions.png" />
</Frame>

#### Formatting Text as Links

To format a `Text` field as a link, you may invoke the `asHtml` method when defining the field:

```php theme={null}
Text::make('Twitter Profile', function () {
    $username = $this->twitterUsername;

    return "<a href='https://twitter.com/{$username}'>@{$username}</a>";
})->asHtml(),
```

#### Copying Text Field Values to the Clipboard

Sometimes you may wish to copy the value of a field into the system clipboard for pasting elsewhere. You can enable this on the detail view for a resource by calling the `copyable` method on the `Text` field:

```php theme={null}
Text::make('Twitter Profile')->copyable(),
```

#### Setting `maxlength` on Text Fields

You may wish to indicate to the user that the content of a `Text` field should be kept within a certain length. You can do this by using the `maxlength` method on the field:

```php theme={null}
use Laravel\Nova\Fields\Text;

Text::make('Name')->maxlength(250),
```

Nova will display the maximum length for the field along with a character counter. However, Nova will not enforce the maximum length. To instruct Nova to enforce the limit, you may call the `enforceMaxlength` method on the field:

```php theme={null}
use Laravel\Nova\Fields\Text;

Text::make('Name')->maxlength(250)->enforceMaxlength(),
```

### Textarea Field

The `Textarea` field provides a `textarea` control:

```php theme={null}
use Laravel\Nova\Fields\Textarea;

Textarea::make('Biography'),
```

By default, Textarea fields will not display their content when viewing a resource's detail page. Instead, the contents of the field will be hidden behind a "Show Content" link, which will reveal the content when clicked. However, if you would like, you may specify that the `Textarea` field should always display its content by invoking the `alwaysShow` method on the field:

```php theme={null}
Textarea::make('Biography')->alwaysShow(),
```

You may specify the `Textarea` height by invoking the `rows` method on the field:

```php theme={null}
Textarea::make('Excerpt')->rows(3),
```

`Textarea` fields may be further customized by setting any attribute on the field. This can be done by calling the `withMeta` method and providing an `extraAttributes` array containing key / value pairs of HTML attributes:

```php theme={null}
Textarea::make('Excerpt')->withMeta(['extraAttributes' => [
    'placeholder' => 'Make it less than 50 characters']
]),
```

#### Setting `maxlength` on Textarea Fields

You may wish to indicate to the user that the content of a `Textarea` field should be kept within a certain length. You can do this by using the `maxlength` method on the field:

```php theme={null}
use Laravel\Nova\Fields\Textarea;

Textarea::make('Name')->maxlength(250),
```

Nova will display the maximum length for the field along with a character counter. However, Nova will not enforce the maximum length. To instruct Nova to enforce the limit, you may call the `enforceMaxlength` method on the field:

```php theme={null}
use Laravel\Nova\Fields\Textarea;

Textarea::make('Name')->maxlength(250)->enforceMaxlength(),
```

### Timezone Field

The `Timezone` field generates a `Select` field containing a list of the world's timezones:

```php theme={null}
use Laravel\Nova\Fields\Timezone;

Timezone::make('Timezone'),
```

### Trix Field

The `Trix` field provides a [Trix editor](https://github.com/basecamp/trix) for its associated field. Typically, this field will correspond to a `TEXT` column in your database. The `Trix` field will store its corresponding HTML within the associated database column:

```php theme={null}
use Laravel\Nova\Fields\Trix;

Trix::make('Biography'),
```

By default, Trix fields will not display their content when viewing a resource on its detail page. Instead, the content will be hidden behind a "Show Content" link, which will reveal the field's content when clicked. If you would like, you may specify that the Trix field should always display its content by invoking the `alwaysShow` method when defining the field:

```php theme={null}
Trix::make('Biography')->alwaysShow(),
```

#### Trix File Uploads

If you would like to allow users to drag-and-drop photos into the `Trix` field, you may chain the `withFiles` method onto the field's definition. When calling the `withFiles` method, you should pass the name of the [filesystem disk](https://laravel.com/docs/filesystem) that photos should be stored on:

```php theme={null}
use Laravel\Nova\Fields\Trix;

Trix::make('Biography')->withFiles('public'),
```

In addition, Nova will define two database tables to store pending and persisted `Field` uploads. These two tables will be created automatically when you run Nova's migrations during installation: `nova_pending_field_attachments` and `nova_field_attachments`.

Finally, in your `routes/console.php` file, you should register a [daily scheduled task](https://laravel.com/docs/scheduling) to prune any stale attachments from the pending attachments table and storage. For convenience, Laravel Nova provides the job implementation needed to accomplish this:

```php theme={null}
use Illuminate\Support\Facades\Schedule;
use Laravel\Nova\Fields\Attachments\PruneStaleAttachments;

Schedule::call(new PruneStaleAttachments)->daily();
```

### UI-Avatar Field

The `UiAvatar` field does not correspond to any column in your application's database. Instead, this field will generate a simple avatar containing the user's initials. This field is powered by [ui-avatars.com](https://ui-avatars.com).

By default, the `UiAvatar` image will be generated based on the value of the model's `name` column. However, if your user's names are not stored in the `name` column, you may pass a custom column name to the field's `make` method:

```php theme={null}
use Laravel\Nova\Fields\UiAvatar;

// Using the "name" column...
UiAvatar::make(),

// Using a custom column...
UiAvatar::make('Avatar', 'full_name'),
```

If necessary, you may invoke the `resolveUsing` method to specify a closure that should be invoked to determine the name that should be used to generate the avatar:

```php theme={null}
UiAvatar::make()->resolveUsing(function () {
    return implode(' ', explode('@', $this->email));
}),
```

You may use the `squared` method to display the image's thumbnail with squared edges. Additionally, you may use the `rounded` method to display the images with fully-rounded edges:

```php theme={null}
UiAvatar::make('Avatar', 'fullname')->squared(),
```

Additional options available when defining `UiAvatar` fields include:

| Option           | Method                      | Description                                 |
| :--------------- | :-------------------------- | :------------------------------------------ |
| Font Size        | `fontSize(0.4)`             | Set a font size between `0.1` to `1`.       |
| Bold             | `bold()`                    | Set font weight to bold.                    |
| Background Color | `backgroundColor('1D4ED7')` | Set the hex color for the image background. |
| Text Color       | `color('FFFFFF')`           | Set the hex color for the image text.       |

### URL Field

The `URL` field renders URLs as clickable links instead of plain text:

```php theme={null}
URL::make('GitHub URL'),
```

The `URL` field also supports customizing the generated link's text by invoking the `displayUsing` method when defining the field. The `displayUsing` method accepts a closure that should return the link's text:

```php theme={null}
URL::make('Receipt')
    ->displayUsing(fn () => "{optional($this->user)->name}'s receipt")
```

By providing a closure as the second argument to the `URL` field, you may use the field to render a link for a computed value that does not necessarily correspond to a column within the associated model's database table:

```php theme={null}
URL::make('Receipt', fn () => $this->receipt_url)
```

### Vapor File Field

The Vapor file field provides convenience and compatibility for uploading files when deploying applications to a serverless environment using [Laravel Vapor](https://vapor.laravel.com):

```php theme={null}
use Laravel\Nova\Fields\VaporFile;

VaporFile::make('Document'),
```

When uploading a file using a `VaporFile` field, Nova will first generate a signed storage URL on Amazon S3. Next, Nova will upload the file directly to temporary storage in the Amazon S3 bucket. When the resource is saved, Nova will move the file to permanent storage.

<Note>
  For more information on how file storage is handled for Vapor applications, please refer to the [Laravel Vapor storage documentation](https://docs.vapor.build/resources/storage).
</Note>

### Vapor Image Field

Vapor file fields provide convenience and compatibility for uploading image files when deploying applications in a serverless environment using [Laravel Vapor](https://vapor.laravel.com):

```php theme={null}
use Laravel\Nova\Fields\VaporImage;

VaporImage::make('Avatar'),
```

Vapor image files support many of the same methods available to [`Image`](#image-field) fields.

<Note>
  To learn more about defining file fields and handling uploads, check out the additional [file field documentation](./file-fields).
</Note>

#### Validating Vapor Image / File Fields

In order to validate the size or other attributes of a Vapor file, you will need to inspect the file directly via the `Storage` facade:

```php theme={null}
use Illuminate\Support\Facades\Storage;

VaporFile::make('Document')
    ->rules('bail', 'required', function ($attribute, $value, $fail) use ($request) {
        if (Storage::size($request->input('vaporFile')[$attribute]['key']) > 1000000) {
            return $fail('The document size may not be greater than 1 MB');
        }
    }),
```

## Computed Fields

In addition to displaying fields that are directly associated with columns in your database, Nova allows you to create "computed fields". Computed fields may be used to display computed values that are not associated with a database column. Since they are not associated with a database column, computed fields may not be `sortable`. These fields may be created by passing a callable (instead of a column name) as the second argument to the field's `make` method:

```php theme={null}
Text::make('Name', function () {
    return $this->first_name.' '.$this->last_name;
}),
```

The model instance will be passed to the computed field callable, allowing you to access the model's properties while computing the field's value:

```php theme={null}
Text::make('Name', function ($model) {
    return $model->first_name.' '.$model->last_name;
}),
```

<Note>
  As you may have noticed in the example above, you may also use `$this` to access the resource's underlying model attributes and relationships.
</Note>

By default, Vue will escape the content of a computed field. If you need to render HTML content within the field, invoke the `asHtml` method when defining your field:

```php theme={null}
Text::make('Status', function () {
    return view('partials.status', [
        'isPassing' => $this->isPassing(),
    ])->render();
})->asHtml(),
```

## Customization

### Readonly Fields

There are times where you may want to allow the user to only create and update certain fields on a resource. You can mark fields as "read only" by invoking the `readonly` method on the field, which will disable the field's corresponding input. You may pass a boolean argument to the `readonly` method to dynamically control whether a field should be "read only":

```php theme={null}
Text::make('Email')->readonly(optional($this->resource)->trashed()),
```

You may also pass a closure to the `readonly` method, and the result of the closure will be used to determine if the field should be "read only". The closure will receive the current `NovaRequest` as its first argument:

```php theme={null}
Text::make('Email')->readonly(function ($request) {
    return ! $request->user()->isAdmin();
}),
```

If you only want to mark a field as "read only" when creating or attaching resources, you may use the `isCreateOrAttachRequest` and `isUpdateOrUpdateAttachedRequest` methods available via the `NovaRequest` instance, respectively:

```php theme={null}
Text::make('Email')->readonly(function ($request) {
    return $request->isUpdateOrUpdateAttachedRequest();
}),
```

### Required Fields

By default, Nova will use a red asterisk to indicate a field is required:

<Frame>
  <img src="https://mintcdn.com/nova-laravel/bY_66OSFONsRO54M/images/required-field.png?fit=max&auto=format&n=bY_66OSFONsRO54M&q=85&s=21b7caa98c607ae5f109fa07a0410332" alt="Required Fields" width="966" height="764" data-path="images/required-field.png" />
</Frame>

Nova does this by looking for the `required` rule inside the field's validation rules to determine if it should show the required state. For example, a field with the following definition would receive a "required" indicator:

```php theme={null}
Text::make('Email')->rules('required'),
```

When you have complex `required` validation requirements, you can manually mark the field as required by passing a boolean to the `required` method when defining the field. This will inform Nova that a "required" indicator should be shown in the UI:

```php theme={null}
Text::make('Email')->required(true),
```

In addition, you may also pass a closure to the `required` method to determine if the field should be marked as required. The closure will receive an instance of `NovaRequest`. The value returned by the closure will be used to determine if field is required:

```php theme={null}
use Illuminate\Validation\Rule;

Text::make('Email')->required(function ($request) {
    return $this->notify_via_email;
}),
```

<Note>
  The `required()` method will only add a "required" indicator to the Nova UI. You must still define the related requirement `rules()` that should apply during validation.
</Note>

### Nullable Fields

By default, Nova attempts to store all fields with a value, however, there are times where you may prefer that Nova store a `null` value in the corresponding database column when the field is empty. To accomplish this, you may invoke the `nullable` method on your field definition:

```php theme={null}
Text::make('Position')->nullable(),
```

You may also set which values should be interpreted as a `null` value using the `nullValues` method, which accepts an array or a closure as its only argument:

```php theme={null}
Text::make('Position')->nullable()->nullValues(['', '0', 'null']),

Text::make('Position')->nullable()->nullValues(function ($value) {
    return $value == '' || $value == 'null' || (int)$value === 0;
}),
```

### Field Help Text

If you would like to place "help" text beneath a field, you may invoke the `help` method when defining your field:

```php theme={null}
Text::make('Tax Rate')->help(
    'The tax rate to be applied to the sale'
),
```

If necessary, you may include HTML within your field's help text to further customize the help text:

```php theme={null}
Text::make('First Name')->help(
    '<a href="#">External Link</a>'
),

Text::make('Last Name')->help(
    view('partials.help-text', ['name' => $this->name])->render()
),
```

### Field Stacking

By default, Nova displays fields next to their labels on the create / update forms, however some fields like "Code", "Markdown", and "Trix" may benefit from the extra width that can be gained by placing the field under their corresponding labels. Fields can be stacked underneath their label using the `stacked` method:

```php theme={null}
Trix::make('Content')->stacked(),
```

### Full Width Fields

You may indicate that the field should be "full width" using the `fullWidth` method:

```php theme={null}
Trix::make('Content')->fullWidth(),
```

### Field Text Alignment

You may change the text alignment of fields using the `textAlign` method:

```php theme={null}
Text::make('Phone Number')->textAlign('left'),
```

The following alignments are valid:

* `left`
* `center`
* `right`

### Field Resolution / Formatting

The `resolveUsing` method allows you to customize how a field is formatted after it is retrieved from your database but before it is sent to the Nova front-end. This method accepts a callback which receives the raw value of the underlying database column:

```php theme={null}
Text::make('Name')->resolveUsing(function ($name) {
    return strtoupper($name);
}),
```

If you would like to customize how a field is formatted only when it is displayed on a resource's "index" or "detail" pages, you may use the `displayUsing` method. Like the `resolveUsing` method, this method accepts a single callback:

```php theme={null}
Text::make('Name')->displayUsing(function ($name) {
    return strtoupper($name);
}),
```

## Filterable Fields

The `filterable` method allows you to enable convenient, automatic [filtering](./../filters/defining-filters) functionality for a given field on resources, relationships, and lenses. The Nova generated filter will automatically be made available via the resource filter menu on the resource's index:

```php theme={null}
DateTime::make('Created At')->filterable(),
```

<Frame>
  <img src="https://mintcdn.com/nova-laravel/ISBJ63muGLVA9l3K/images/filterable-fields-date.png?fit=max&auto=format&n=ISBJ63muGLVA9l3K&q=85&s=021663d1fd5e052d1bc8821b8a9950e9" alt="Filterable fields" width="616" height="896" data-path="images/filterable-fields-date.png" />
</Frame>

The `filterable` method also accepts a closure as an argument. This closure will receive the filter query, which you may then customize in order to filter the resource results to your liking:

```php theme={null}
Text::make('Email')->filterable(function ($request, $query, $value, $attribute) {
    $query->where($attribute, 'LIKE', "{$value}%");
}),
```

The generated filter will be a text filter, select filter, number range filter, or date range filter depending on the underlying field type that was marked as filterable.

## Dependent Fields

The `dependsOn` method allows you to specify that a field's configuration depends on one or more other field's values. The `dependsOn` method accepts an `array` of dependent field attributes and a closure that modifies the configuration of the current field instance.

Dependent fields allow advanced customization, such as toggling read-only mode, validation rules, and more based on the state of another field:

```php theme={null}
use Laravel\Nova\Fields\FormData;
use Laravel\Nova\Fields\Select;
use Laravel\Nova\Fields\Text;
use Laravel\Nova\Http\Requests\NovaRequest;

Select::make('Purchase Type', 'type')
    ->options([
        'personal' => 'Personal',
        'gift' => 'Gift',
    ]),

// Recipient field configuration is customized based on purchase type...
Text::make('Recipient')
    ->readonly()
    ->dependsOn(
        ['type'],
        function (Text $field, NovaRequest $request, FormData $formData) {
            if ($formData->type === 'gift') {
                $field->readonly(false)->rules(['required', 'email']);
            }
        }
    ),
```

To define dependent fields separately for creating and updating resources, you may use the `dependsOnCreating` and `dependsOnUpdating` methods.

#### Supported Dependent Fields

The following field types may depend on other fields:

* Audio
* BelongsTo
* Boolean
* BooleanGroup
* Color
* Code
* Country
* Currency
* Date
* DateTime
* File
* Heading
* Hidden
* Image
* KeyValue
* Markdown
* MorphTo
* Number
* Password
* PasswordConfirmation
* Select
* Status
* Textarea
* Text
* Timezone
* Trix
* URL
* VaporAudio
* VaporFile
* VaporImage

The following field types may not be depended upon by other fields since they do not live-report their changes to Nova:

* Audio
* Code
* File
* Image
* KeyValue
* Status
* Tag
* Trix
* VaporAudio
* VaporFile
* VaporImage

#### Toggling Field Visibility using `dependsOn`

One common use-case for dependent fields is toggling field visibility based on the value of another field. You can accomplish this using the `hide` and `show` methods:

```php theme={null}
use Laravel\Nova\Fields\BelongsTo;
use Laravel\Nova\Fields\Boolean;
use Laravel\Nova\Fields\FormData;
use Laravel\Nova\Http\Requests\NovaRequest;

Boolean::make('Anonymous Comment', 'anonymous')
    ->default(true),

BelongsTo::make('User')
    ->hide()
    ->rules('sometimes')
    ->dependsOn('anonymous', function (BelongsTo $field, NovaRequest $request, FormData $formData) {
        if ($formData->boolean('anonymous') === false) {
            $field->show()->rules('required');
        }
    }),
```

#### Setting a Field's Value Using `dependsOn`

Another common use-case for dependent fields is to set the value of a field based on the value of another field. You can accomplish this using the `setValue` method:

```php theme={null}
use Laravel\Nova\Fields\DateTime;
use Laravel\Nova\Fields\FormData;
use Laravel\Nova\Http\Requests\NovaRequest;

DateTime::make('Created At'),

DateTime::make('Updated At')->dependsOn(['created_at'], function (DateTime $field, NovaRequest $request, FormData $form) {
    $field->setValue(Carbon::parse($form->created_at)->addDays(7));
}),
```

#### Accessing Request Resource IDs

When interacting with dependent fields, you may retrieve the current resource and related resource IDs via the `resource` method:

```php theme={null}
use Laravel\Nova\Fields\BelongsTo;
use Laravel\Nova\Fields\Currency;

BelongsTo::make(__('Books'), 'books', Book::class),

Currency::make('Price')
    ->dependsOn('books', function ($field, NovaRequest $request, $formData) {
        $bookId = (int) $formData->resource(Book::uriKey(), $formData->books);

        if ($bookId == 1) {
            $field->rules([
                'required', 'numeric', 'min:10', 'max:199'
            ])->help('Price starts from $10-$199');

            return;
        }

        $field->rules([
            'required', 'numeric', 'min:0', 'max:99'
        ])->help('Price starts from $0-$99');
    }),
```

## Extending Fields

Fields are "macroable", which allows you to add additional methods to the `Field` class at run time. The `Field` class' `macro` method accepts a closure that will be executed when your macro is called. The macro closure may access the field's other methods via `$this`, just as if it were a real method of the field class. For example, the following code adds a `toUpper` method to the `Field` class:

```php theme={null}
use Illuminate\Support\Str;
use Laravel\Nova\Fields\Field;

Field::macro('toUpper', function () {
    return $this->displayUsing(function ($value) {
        return Str::upper($value);
    });
});
```

Once the macro has been defined, it may be used when defining any field:

```php theme={null}
Text::make('Name')->toUpper(),
```

#### Macro Arguments

If necessary, you may define macros that accept additional arguments:

```php theme={null}
use Laravel\Nova\Fields\Field;

Field::macro('showWhen', function ($condition) {
    $condition === true ? $this->show() : $this->hide();

    return $this;
});
```

#### Macro on Specific Fields

You can also add a macro only to a specific type of `Field`. For example, you might add a `withFriendlyDate` macro to the `DateTime` field class:

```php theme={null}
use Laravel\Nova\Fields\DateTime;

DateTime::macro('withFriendlyDate', function () {
    return $this->tap(function ($field) {
        $field->displayUsing(function ($d) use ($field) {
            if ($field->isValidNullValue($d)) {
                return null;
            }

            return Carbon::parse($d)->diffForHumans();
        });
    });
});
```
