Field Components

Refine provides field components for displaying various types of data in a consistent, formatted way. These components work across all UI frameworks and handle common formatting needs automatically.

TextField

Display plain text values.

Basic Usage

Ant Design
Material UI
Mantine
Chakra UI

import { TextField } from "@refinedev/antd";

function ProductShow() {
  return <TextField value="Product Name" />;
}

import { TextField } from "@refinedev/mui";

function ProductShow() {
  return <TextField value="Product Name" />;
}

import { TextField } from "@refinedev/mantine";

function ProductShow() {
  return <TextField value="Product Name" />;
}

import { TextField } from "@refinedev/chakra-ui";

function ProductShow() {
  return <TextField value="Product Name" />;
}

Props

Prop	Type	Description
`value`	`string`	Text value to display

NumberField

Display formatted number values with locale support.

Basic Usage

import { NumberField } from "@refinedev/antd";

function ProductShow() {
  return (
    <>
      {/* Plain number */}
      <NumberField value={1234.56} />

      {/* Currency */}
      <NumberField
        value={1234.56}
        options={{
          style: "currency",
          currency: "USD",
        }}
      />

      {/* Percentage */}
      <NumberField
        value={0.1234}
        options={{
          style: "percent",
          minimumFractionDigits: 2,
        }}
      />

      {/* Custom locale */}
      <NumberField
        value={1234.56}
        locale="de-DE"
        options={{
          style: "currency",
          currency: "EUR",
        }}
      />
    </>
  );
}

Props

Prop	Type	Description
`value`	`number`	Number value to display
`locale`	`string`	Locale for formatting (default: browser locale)
`options`	`Intl.NumberFormatOptions`	Number format options

Common Formatting Options

// Currency
options={{ style: "currency", currency: "USD" }}

// Percentage
options={{ style: "percent" }}

// Decimal places
options={{ minimumFractionDigits: 2, maximumFractionDigits: 2 }}

// Thousands separator
options={{ useGrouping: true }}

// Compact notation
options={{ notation: "compact" }}

DateField

Display formatted date and time values.

Basic Usage

import { DateField } from "@refinedev/antd";

function ProductShow() {
  return (
    <>
      {/* Default format */}
      <DateField value="2024-01-15T10:30:00Z" />

      {/* Custom format (using dayjs) */}
      <DateField value="2024-01-15T10:30:00Z" format="LL" />
      <DateField value="2024-01-15T10:30:00Z" format="YYYY-MM-DD HH:mm" />

      {/* Locale */}
      <DateField
        value="2024-01-15T10:30:00Z"
        locales="de-DE"
        format="LLL"
      />

      {/* Relative time */}
      <DateField value="2024-01-15T10:30:00Z" format="fromNow" />
    </>
  );
}

Props

Prop	Type	Description
`value`	`string \| Date`	Date value to display
`format`	`string`	Date format string (dayjs format)
`locales`	`string`	Locale for formatting

Common Format Strings

// Predefined formats
format="L"       // 01/15/2024
format="LL"      // January 15, 2024
format="LLL"     // January 15, 2024 10:30 AM
format="LLLL"    // Monday, January 15, 2024 10:30 AM

// Custom formats
format="YYYY-MM-DD"              // 2024-01-15
format="DD/MM/YYYY HH:mm"        // 15/01/2024 10:30
format="MMM D, YYYY"             // Jan 15, 2024

// Relative time
format="fromNow"  // 2 hours ago
format="toNow"    // in 2 hours

EmailField

Display email addresses as clickable links.

Basic Usage

import { EmailField } from "@refinedev/antd";

function UserShow() {
  return <EmailField value="[email protected]" />;
}

Props

Prop	Type	Description
`value`	`string`	Email address

UrlField

Display URLs as clickable links.

Basic Usage

import { UrlField } from "@refinedev/antd";

function ProductShow() {
  return (
    <>
      {/* Default - shows full URL */}
      <UrlField value="https://example.com/product" />

      {/* Custom text */}
      <UrlField value="https://example.com/product">
        Visit Product Page
      </UrlField>

      {/* Open in new tab */}
      <UrlField value="https://example.com" target="_blank" />
    </>
  );
}

Props

Prop	Type	Description
`value`	`string`	URL to display
`children`	`ReactNode`	Custom link text
`target`	`string`	Link target attribute

BooleanField

Display boolean values with icons or text.

Basic Usage

Ant Design
Material UI

import { BooleanField } from "@refinedev/antd";

function ProductShow() {
  return (
    <>
      {/* Default - checkmark/cross icons */}
      <BooleanField value={true} />
      <BooleanField value={false} />

      {/* Custom values */}
      <BooleanField
        value={true}
        trueIcon={<CheckCircleOutlined />}
        falseIcon={<CloseCircleOutlined />}
      />

      {/* Text instead of icons */}
      <BooleanField value={true} valueLabelTrue="Yes" valueLabelFalse="No" />
    </>
  );
}

import { BooleanField } from "@refinedev/mui";
import { CheckCircle, Cancel } from "@mui/icons-material";

function ProductShow() {
  return (
    <>
      <BooleanField value={true} />
      <BooleanField
        value={true}
        trueIcon={<CheckCircle />}
        falseIcon={<Cancel />}
      />
    </>
  );
}

Props

Prop	Type	Description
`value`	`boolean`	Boolean value to display
`trueIcon`	`ReactNode`	Icon for true value
`falseIcon`	`ReactNode`	Icon for false value
`valueLabelTrue`	`string`	Text for true value
`valueLabelFalse`	`string`	Text for false value

TagField

Display values as colored tags or badges.

Basic Usage

Ant Design
Material UI
Chakra UI

import { TagField } from "@refinedev/antd";

function ProductShow() {
  return (
    <>
      {/* Default */}
      <TagField value="Active" />

      {/* With color */}
      <TagField value="Active" color="green" />
      <TagField value="Pending" color="orange" />
      <TagField value="Inactive" color="red" />

      {/* Icon */}
      <TagField value="Premium" icon={<StarOutlined />} color="gold" />
    </>
  );
}

import { TagField } from "@refinedev/mui";

function ProductShow() {
  return (
    <>
      <TagField value="Active" />
      <TagField value="Active" color="success" />
      <TagField value="Pending" color="warning" />
    </>
  );
}

import { TagField } from "@refinedev/chakra-ui";

function ProductShow() {
  return (
    <>
      <TagField value="Active" />
      <TagField value="Active" colorScheme="green" />
      <TagField value="Pending" colorScheme="orange" />
    </>
  );
}

Props

Prop	Type	Description
`value`	`string`	Tag text
`color`	`string`	Tag color
`icon`	`ReactNode`	Tag icon

ImageField

Display images with preview support.

Basic Usage

import { ImageField } from "@refinedev/antd";

function ProductShow() {
  return (
    <>
      {/* Single image */}
      <ImageField value="https://example.com/image.jpg" />

      {/* With custom width */}
      <ImageField value="https://example.com/image.jpg" width={200} />

      {/* Image title */}
      <ImageField
        value="https://example.com/image.jpg"
        title="Product Image"
      />

      {/* Multiple images */}
      <ImageField
        value={[
          "https://example.com/image1.jpg",
          "https://example.com/image2.jpg",
        ]}
      />
    </>
  );
}

Props

Prop	Type	Description
`value`	`string \| string[]`	Image URL(s)
`width`	`number`	Image width
`height`	`number`	Image height
`title`	`string`	Image alt/title text

FileField

Display file download links.

Basic Usage

import { FileField } from "@refinedev/antd";

function ProductShow() {
  return (
    <>
      {/* Simple file link */}
      <FileField src="https://example.com/document.pdf" />

      {/* With custom title */}
      <FileField
        src="https://example.com/document.pdf"
        title="Download PDF"
      />

      {/* Download attribute */}
      <FileField
        src="https://example.com/document.pdf"
        title="Product Brochure"
        download="brochure.pdf"
      />
    </>
  );
}

Props

Prop	Type	Description
`src`	`string`	File URL
`title`	`string`	Link text
`download`	`boolean \| string`	Download filename

MarkdownField

Render markdown content as HTML.

Basic Usage

import { MarkdownField } from "@refinedev/antd";

function ProductShow() {
  const markdown = `
# Product Description

This is a **great** product with:

- Feature 1
- Feature 2
- Feature 3

[Learn more](https://example.com)
  `;

  return <MarkdownField value={markdown} />;
}

Props

Prop	Type	Description
`value`	`string`	Markdown content

Supported Markdown

The MarkdownField component supports:

Headers (#, ##, ###)
Bold (text) and italic (text)
Lists (ordered and unordered)
Links (text)
Code blocks (code)
Tables (via remark-gfm)
Strikethrough (via remark-gfm)

Using Fields in Tables

Ant Design Table

import { List, useTable, TextField, NumberField, DateField, BooleanField } from "@refinedev/antd";
import { Table } from "antd";

export const ProductList = () => {
  const { tableProps } = useTable();

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column
          dataIndex="name"
          title="Name"
          render={(value) => <TextField value={value} />}
        />
        <Table.Column
          dataIndex="price"
          title="Price"
          render={(value) => (
            <NumberField
              value={value}
              options={{ style: "currency", currency: "USD" }}
            />
          )}
        />
        <Table.Column
          dataIndex="createdAt"
          title="Created"
          render={(value) => <DateField value={value} format="LL" />}
        />
        <Table.Column
          dataIndex="isActive"
          title="Active"
          render={(value) => <BooleanField value={value} />}
        />
      </Table>
    </List>
  );
};

Material-UI DataGrid

import { List, useDataGrid, NumberField, DateField } from "@refinedev/mui";
import { DataGrid, GridColDef } from "@mui/x-data-grid";

export const ProductList = () => {
  const { dataGridProps } = useDataGrid();

  const columns: GridColDef[] = [
    { field: "name", headerName: "Name", flex: 1 },
    {
      field: "price",
      headerName: "Price",
      width: 130,
      renderCell: ({ value }) => (
        <NumberField
          value={value}
          options={{ style: "currency", currency: "USD" }}
        />
      ),
    },
    {
      field: "createdAt",
      headerName: "Created",
      width: 200,
      renderCell: ({ value }) => <DateField value={value} format="LL" />,
    },
  ];

  return (
    <List>
      <DataGrid {...dataGridProps} columns={columns} autoHeight />
    </List>
  );
};

Using Fields in Show Pages

import {
  Show,
  TextField,
  NumberField,
  DateField,
  EmailField,
  BooleanField,
  TagField,
  ImageField,
} from "@refinedev/antd";
import { useShow } from "@refinedev/core";
import { Typography, Space } from "antd";

const { Title } = Typography;

export const ProductShow = () => {
  const { queryResult } = useShow();
  const { data, isLoading } = queryResult;
  const record = data?.data;

  return (
    <Show isLoading={isLoading}>
      <Space direction="vertical" size="large" style={{ width: "100%" }}>
        <div>
          <Title level={5}>Name</Title>
          <TextField value={record?.name} />
        </div>

        <div>
          <Title level={5}>Price</Title>
          <NumberField
            value={record?.price}
            options={{ style: "currency", currency: "USD" }}
          />
        </div>

        <div>
          <Title level={5}>Status</Title>
          <TagField
            value={record?.status}
            color={record?.status === "active" ? "green" : "red"}
          />
        </div>

        <div>
          <Title level={5}>Active</Title>
          <BooleanField value={record?.isActive} />
        </div>

        <div>
          <Title level={5}>Contact Email</Title>
          <EmailField value={record?.email} />
        </div>

        <div>
          <Title level={5}>Created At</Title>
          <DateField value={record?.createdAt} format="LLL" />
        </div>

        <div>
          <Title level={5}>Images</Title>
          <ImageField value={record?.images} width={200} />
        </div>
      </Space>
    </Show>
  );
};

Custom Field Components

Create your own field components:

import { Typography } from "antd";

interface CustomFieldProps {
  value: any;
}

export const StatusField: React.FC<CustomFieldProps> = ({ value }) => {
  const getColor = (status: string) => {
    switch (status) {
      case "active":
        return "green";
      case "pending":
        return "orange";
      case "inactive":
        return "red";
      default:
        return "default";
    }
  };

  return (
    <Typography.Text
      style={{
        color: getColor(value),
        fontWeight: "bold",
      }}
    >
      {value?.toUpperCase()}
    </Typography.Text>
  );
};

// Usage
<StatusField value="active" />

Best Practices

Consistent Formatting: Use field components for consistent data display
Null Safety: Handle null/undefined values gracefully
Localization: Use appropriate locales for numbers and dates
Performance: Use field components in table cells for better performance
Accessibility: Ensure field components are screen-reader friendly

Next Steps

CRUD Components

Build data interfaces

Button Components

Add action buttons

Forms

Work with form data

Examples

See complete examples

Overview

Supported UI Frameworks

Components

​TextField

​Basic Usage

​Props

​NumberField

​Basic Usage

​Props

​Common Formatting Options

​DateField

​Basic Usage

​Props

​Common Format Strings

​EmailField

​Basic Usage

​Props

​UrlField

​Basic Usage

​Props

​BooleanField

​Basic Usage

​Props

​TagField

​Basic Usage

​Props

​ImageField

​Basic Usage

​Props

​FileField

​Basic Usage

​Props

​MarkdownField

​Basic Usage

​Props

​Supported Markdown

​Using Fields in Tables

​Ant Design Table

​Material-UI DataGrid

​Using Fields in Show Pages

​Custom Field Components

​Best Practices

​Next Steps

CRUD Components

Button Components

Forms

Examples

Build docs developers (and LLMs) love

TextField

Basic Usage

Props

NumberField

Basic Usage

Props

Common Formatting Options

DateField

Basic Usage

Props

Common Format Strings

EmailField

Basic Usage

Props

UrlField

Basic Usage

Props

BooleanField

Basic Usage

Props

TagField

Basic Usage

Props

ImageField

Basic Usage

Props

FileField

Basic Usage

Props

MarkdownField

Basic Usage

Props

Supported Markdown

Using Fields in Tables

Ant Design Table

Material-UI DataGrid

Using Fields in Show Pages

Custom Field Components

Best Practices

Next Steps