Customize Fields Panel

v0.1.0

Generic filter/option panel composing segmented groups, dropdown selects, switches, and text inputs under Filters/Options sections - used to build any 'customize this action' surface.

View as Markdown

Install

npx shadcn@4.1.2 add @signalos/customize-fields-panel

Requires a configured @signalos registry and a valid SIGNALOS_REGISTRY_TOKEN - get access. Registry dependencies (@signalos/tokens, @signalos/utils, @signalos/input, @signalos/label, @signalos/select, @signalos/switch, @signalos/tooltip, @signalos/filter-toolbar) are pulled automatically.

Preview

Example & code

customize-fields-panel.example.tsx

// Example: the snippet shown as public example code in the catalog.
import { useState } from "react"

import { CustomizeFieldsPanel } from "@/components/widgets/customize-fields-panel/CustomizeFieldsPanel"

export default function Example() {
  const [severity, setSeverity] = useState("high")
  const [includeArchived, setIncludeArchived] = useState(false)

  return (
    <CustomizeFieldsPanel
      segments={[
        {
          key: "severity",
          value: severity,
          onChange: setSeverity,
          options: [
            { value: "high", label: "High" },
            { value: "low", label: "Low" },
          ],
        },
      ]}
      switches={[
        {
          key: "archived",
          label: "Include archived",
          checked: includeArchived,
          onChange: setIncludeArchived,
        },
      ]}
    />
  )
}

Props

SwitchFieldGroup

Prop	Type	Default
key*	`string`	-
label*	`ReactNode`	-
checked*	`boolean`	-
onChange*	`(checked: boolean) => void`	-

TextFieldGroup

Prop	Type	Default	Description
key*	`string`	-
label*	`ReactNode`	-
value*	`string`	-
onChange*	`(value: string) => void`	-
placeholder	`string \| undefined`	-
type	`"number" \| "text" \| undefined`	"text"
min	`number \| undefined`	-	Applied when `type` is "number".
max	`number \| undefined`	-

CustomizeFieldsPanelProps

Prop	Type	Default	Description
segments	`readonly FilterSegmentGroup[] \| undefined`	-	Segmented single-select button groups (e.g. severity, deadline).
selects	`readonly FilterSelectGroup[] \| undefined`	-	Dropdown select groups (e.g. role, category).
switches	`readonly SwitchFieldGroup[] \| undefined`	-	Boolean toggle fields (e.g. "include archived").
inputs	`readonly TextFieldGroup[] \| undefined`	-	Manually-entered text/number fields (e.g. a role id, a record limit).
filtersLabel	`string \| undefined`	"Filters"	Heading shown above `segments`/`selects`.
optionsLabel	`string \| undefined`	"Options"	Heading shown above `inputs`/`switches`.
className	`string \| undefined`	-
data-testid	`string \| undefined`	-	Test identifier rendered as `data-testid` on the root element.

Changelog

customize-fields-panel

0.1.0

Initial release: a generic filter/option panel composing segmented button groups, dropdown selects, switches, and text/number inputs under a "Filters" and an "Options" section (both labels overridable via filtersLabel/optionsLabel). Carries no domain vocabulary of its own - extracted from the print-customize panel so it can back any "customize this action" surface, not just print.