Skip to main content
Version: 4.xx.xx
Swizzle Ready

Boolean

This field is used to display boolean values. It uses the <Tooltip> values from Chakra UI.

Good to know:

You can swizzle this component to customize it with the Refine CLI

Usage

Let's see how we can use <BooleanField> with the example in the post list.

localhost:3000/posts
import {
List,
DateField,
BooleanField,
} from "@refinedev/chakra-ui";
import {
TableContainer,
Table,
Thead,
Tr,
Th,
Tbody,
Td,
} from "@chakra-ui/react";
import { useTable } from "@refinedev/react-table";
import { ColumnDef, flexRender } from "@tanstack/react-table";
import { IconX, IconCheck } from "@tabler/icons-react";

const PostList: React.FC = () => {
const columns = React.useMemo<ColumnDef<IPost>[]>(
() => [
{
id: "id",
header: "ID",
accessorKey: "id",
},
{
id: "title",
header: "Title",
accessorKey: "title",
},
{
id: "status",
header: "Status",
accessorKey: "status",
cell: function render({ getValue }) {
return (
<BooleanField
value={getValue() === "published"}
trueIcon={<IconCheck />}
falseIcon={<IconX />}
valueLabelTrue="published"
valueLabelFalse="unpublished"
/>
);
},
},
],
[],
);

const { getHeaderGroups, getRowModel } = useTable({
columns,
});

return (
<List>
<TableContainer>
<Table variant="simple" whiteSpace="pre-line">
<Thead>
{getHeaderGroups().map((headerGroup) => (
<Tr key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<Th key={header.id}>
{!header.isPlaceholder &&
flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</Th>
);
})}
</Tr>
))}
</Thead>
<Tbody>
{getRowModel().rows.map((row) => {
return (
<Tr key={row.id}>
{row.getVisibleCells().map((cell) => {
return (
<Td key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</Td>
);
})}
</Tr>
);
})}
</Tbody>
</Table>
</TableContainer>
</List>
);
};

API Reference

Properties

PropertyTypeDescriptionDefault
value

unknown

The value of the field.

title

(NonNullable<ReactNode> & string)

The text shown in the tooltip

value ? valueLabelTrue : valueLabelFalse

svgIconProps

Omit<IconProps, "ref">

valueLabelTrue

string

If there is a value, this is the text to use.

true

valueLabelFalse

string

If there no value, this is the text to use.

false

trueIcon

ReactNode

If there is a value, this is the icon to use.

<IconCheck />

falseIcon

ReactNode

If there is no value, this is the icon to use.

<IconX />

External Props:

It also accepts all props of Chakra UI Tooltip.