SettingsRow

SettingsRow combines ListItem and Switch. It associates the visible label with the switch, makes the whole row clickable, and keeps disabled behavior consistent.

Controlled setting

Pass checked and onCheckedChange when your application owns the value. The handler receives the next checked state and Base UI event details. Clicking either the label or switch invokes it once; keyboard users can focus the switch and press Space.

import { useState } from 'react';
import { SettingsRow } from 'twenty-ui/components';
import { IconBell } from 'twenty-ui/icon';

export const NotificationSetting = () => {
  const [enabled, setEnabled] = useState(false);

  return (
    <SettingsRow
      startIcon={<IconBell aria-hidden />}
      checked={enabled}
      onCheckedChange={setEnabled}
    >
      Notifications
    </SettingsRow>
  );
};

Description and initial value

Use defaultChecked for an uncontrolled setting. description supplies supporting text and the switch’s accessible description, while the children provide its accessible name.

import { SettingsRow } from 'twenty-ui/components';

export const WeeklyDigestSetting = () => (
  <SettingsRow defaultChecked description="Sent every Monday" name="digest">
    Weekly digest
  </SettingsRow>
);

name, value, and required configure the switch’s underlying checkbox for form submission. An unchecked switch does not submit a value.

Disabled and read-only settings

Pass disabled once to disable both the row and switch. Use readOnly to prevent changes while keeping the switch focusable.

import { SettingsRow } from 'twenty-ui/components';

export const WorkspaceSettings = () => (
  <>
    <SettingsRow disabled>Notifications</SettingsRow>
    <SettingsRow readOnly defaultChecked>
      Activity history
    </SettingsRow>
  </>
);

Appearance and composition

The switch defaults to size="sm"; use size="md" for a larger switch. The row height stays the same. focused applies the row’s highlighted style without moving keyboard focus. Native label attributes, className, style, and ref target the outer label. The label and switch association is managed internally. Keep the children, description, and icon non-interactive. Use onCheckedChange for value updates. For navigation or action rows, use ListItem with a button or link.

Props

boolean

Controlled checked state of the switch.

ReactNode

required

Visible label and accessible name of the switch. Use non-interactive content.

boolean

default:"false"

Initial checked state when uncontrolled.

ReactNode

Non-interactive supporting content, associated with the switch as its accessible description.

boolean

default:"false"

Disables both the row and its switch.

boolean

default:"false"

Applies the highlighted row style without moving keyboard focus.

string

Name of the hidden checkbox used in form submission.

((checked: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)

Called when the switch value changes, with the next checked state and Base UI event details.

boolean

default:"false"

Keeps the switch focusable while preventing changes.

boolean

default:"false"

Requires the switch to be checked for form submission.

"md" | "sm"

default:"sm"

Visual size of the switch. The row height stays the same.

ReactNode

Decorative content before the label.

string

Value submitted when the switch is checked.

Overview

Apps

API

Self-Host

Contribute

UI Library

Controlled setting

Description and initial value

Disabled and read-only settings

Appearance and composition

Props

​Controlled setting

​Description and initial value

​Disabled and read-only settings

​Appearance and composition

​Props

Controlled setting

Description and initial value

Disabled and read-only settings

Appearance and composition

Props