Boolean field

Display a true or false value.

A boolean field declares a value that is true or false. Display variants tell the renderer how to show the state. Input variants tell a form which control to use.

API

fields.boolean<Name extends string>(
  name: Name,
  options?: BooleanFieldOptions
): BooleanFieldBuilder<Name>

Option	Input	Result
`label`	`string`	Sets the text shown for the field.
`description`	`string`	Adds supporting text for the label.
`displayVariant`	`check` or `badge`	Selects the read-only presentation.
`inputVariant`	`checkbox` or `toggle`	Selects the form control.

configure(options) returns a configured clone. clone() returns an independent copy with the same options.

Basic boolean field

The protocol keeps true, false, and an empty value distinct.

import {
  datalist,
  defineResource,
  fields,
} from '@backlit/sdk'

const customers = defineResource('customers', [
  fields.boolean('active', { label: 'Active' }),
])

customers.view('detail', () =>
  datalist({ active: true }).setFields(
    customers.pick('active')
  )
)

export default customers

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "customers",
    "name": "detail",
    "slots": {
      "content": [
        {
          "kind": "datalist",
          "fields": [
            {
              "kind": "boolean",
              "name": "active",
              "label": "Active"
            }
          ],
          "data": {
            "active": true
          }
        }
      ]
    }
  }
}

Description

Use a description to explain what makes the state true.

import {
  datalist,
  defineResource,
  fields,
} from '@backlit/sdk'

const customers = defineResource('customers', [
  fields.boolean('verified', {
    label: 'Verified',
    description:
      'The customer has confirmed their email address.',
  }),
])

customers.view('detail', () =>
  datalist({ verified: true }).setFields(
    customers.pick('verified')
  )
)

export default customers

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "customers",
    "name": "detail",
    "slots": {
      "content": [
        {
          "kind": "datalist",
          "fields": [
            {
              "kind": "boolean",
              "name": "verified",
              "description": "The customer has confirmed their email address.",
              "label": "Verified"
            }
          ],
          "data": {
            "verified": true
          }
        }
      ]
    }
  }
}

Display variants

Use check for a compact state marker. Use badge when the state must read as a status. The renderer controls the final visual form.

import {
  datalist,
  defineResource,
  fields,
} from '@backlit/sdk'

const customers = defineResource('customers', [
  fields.boolean('verified', {
    label: 'Verified',
    displayVariant: 'check',
  }),
  fields.boolean('subscribed', {
    label: 'Subscribed',
    displayVariant: 'badge',
  }),
])

customers.view('detail', () =>
  datalist({ verified: true, subscribed: false }).setFields(
    customers.pick('verified', 'subscribed')
  )
)

export default customers

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "customers",
    "name": "detail",
    "slots": {
      "content": [
        {
          "kind": "datalist",
          "fields": [
            {
              "kind": "boolean",
              "name": "verified",
              "label": "Verified",
              "displayVariant": "check"
            },
            {
              "kind": "boolean",
              "name": "subscribed",
              "label": "Subscribed",
              "displayVariant": "badge"
            }
          ],
          "data": {
            "verified": true,
            "subscribed": false
          }
        }
      ]
    }
  }
}

Input variants

Use checkbox for a conventional boolean input. Use toggle when the control represents an immediate on or off state.

import {
  datalist,
  defineResource,
  fields,
} from '@backlit/sdk'

const customers = defineResource('customers', [
  fields.boolean('verified', {
    label: 'Verified',
    inputVariant: 'checkbox',
  }),
  fields.boolean('subscribed', {
    label: 'Subscribed',
    inputVariant: 'toggle',
  }),
])

customers.view('detail', () =>
  datalist({ verified: true, subscribed: false }).setFields(
    customers.pick('verified', 'subscribed')
  )
)

export default customers

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "customers",
    "name": "detail",
    "slots": {
      "content": [
        {
          "kind": "datalist",
          "fields": [
            {
              "kind": "boolean",
              "name": "verified",
              "inputVariant": "checkbox",
              "label": "Verified"
            },
            {
              "kind": "boolean",
              "name": "subscribed",
              "inputVariant": "toggle",
              "label": "Subscribed"
            }
          ],
          "data": {
            "verified": true,
            "subscribed": false
          }
        }
      ]
    }
  }
}

Clone

Use configure to change a variant without changing the original field.

import {
  datalist,
  defineResource,
  fields,
} from '@backlit/sdk'

const active = fields.boolean('active', {
  label: 'Active',
  displayVariant: 'check',
})
const customers = defineResource('customers', [
  active.configure({ displayVariant: 'badge' }),
])

customers.view('detail', () =>
  datalist({ active: true }).setFields(
    customers.pick('active')
  )
)

export default customers

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "customers",
    "name": "detail",
    "slots": {
      "content": [
        {
          "kind": "datalist",
          "fields": [
            {
              "kind": "boolean",
              "name": "active",
              "label": "Active",
              "displayVariant": "badge"
            }
          ],
          "data": {
            "active": true
          }
        }
      ]
    }
  }
}

All options

You can use a label, description, display variant, and input variant on the same boolean field.

import {
  datalist,
  defineResource,
  fields,
} from '@backlit/sdk'

const customers = defineResource('customers', [
  fields.boolean('verified', {
    label: 'Verified',
    description:
      'The customer has confirmed their email address.',
    displayVariant: 'badge',
    inputVariant: 'toggle',
  }),
])

customers.view('detail', () =>
  datalist({ verified: true }).setFields(
    customers.pick('verified')
  )
)

export default customers

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "customers",
    "name": "detail",
    "slots": {
      "content": [
        {
          "kind": "datalist",
          "fields": [
            {
              "kind": "boolean",
              "name": "verified",
              "description": "The customer has confirmed their email address.",
              "inputVariant": "toggle",
              "label": "Verified",
              "displayVariant": "badge"
            }
          ],
          "data": {
            "verified": true
          }
        }
      ]
    }
  }
}