SettingsGroup
Settings rows in a rounded group, title and description left, the control right.
General
Default projectOpens when you sign in.
First day of the weekUsed in date pickers and usage charts.
Show times in UTCRequest logs and the audit log use UTC instead of your time zone.
Security
Two-step verificationCodes from an authenticator app.
Single sign-onManaged by your organization.Open settings (opens in a new tab)
<div className="w-720">
<SettingsSection title="General">
<SettingsGroup>
<SettingsRow
title="Default project"
description="Opens when you sign in."
control={
<Select
appearance="ghost"
size="sm"
aria-label="Default project"
options={[
{ value: "a", label: "Checkout assistant" },
{ value: "b", label: "Support triage" },
]}
defaultValue="a"
/>
}
/>
<SettingsRow
title="First day of the week"
description="Used in date pickers and usage charts."
control={
<Select
appearance="ghost"
size="sm"
aria-label="First day of the week"
options={[
{ value: "mon", label: "Monday" },
{ value: "sun", label: "Sunday" },
]}
defaultValue="mon"
/>
}
/>
<SettingsRow
title="Show times in UTC"
description="Request logs and the audit log use UTC instead of your time zone."
control={<Switch aria-label="Show times in UTC" />}
/>
</SettingsGroup>
</SettingsSection>
<SettingsSection title="Security">
<SettingsGroup>
<SettingsRow title="Two-step verification" description="Codes from an authenticator app." control={<Button size="sm">Set up</Button>} />
<SettingsRow
title="Single sign-on"
description="Managed by your organization."
control={
<Link href="#" external>
Open settings
</Link>
}
/>
</SettingsGroup>
</SettingsSection>
</div>import { SettingsSection, SettingsGroup, SettingsRow } from "@logicplanes/kaeso-ui";Props
actionsReactNodeRight of the title.
childrenReactNodeThe section's groups of rows.
descriptionReactNodeOne sentence under the heading.
titleReactNodeThe section's heading.