CollapsibleSettings() — ui Function Reference

Architecture documentation for the CollapsibleSettings() function in collapsible-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ CollapsibleSettings() — ui Function Reference

Dependency Diagram

graph TD
  09567b63_b264_6c10_7e23_243138c9bc7c["CollapsibleSettings()"]
  9c2f8751_9cee_835d_4c31_60aeed473c38["collapsible-example.tsx"]
  09567b63_b264_6c10_7e23_243138c9bc7c -->|defined in| 9c2f8751_9cee_835d_4c31_60aeed473c38
  style 09567b63_b264_6c10_7e23_243138c9bc7c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/collapsible-example.tsx lines 167–239

function CollapsibleSettings() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Example title="Settings" className="items-center">
      <Card className="mx-auto w-full max-w-xs" size="sm">
        <CardHeader>
          <CardTitle>Radius</CardTitle>
          <CardDescription>
            Set the corner radius of the element.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Collapsible
            open={isOpen}
            onOpenChange={setIsOpen}
            className="flex items-start gap-2"
          >
            <FieldGroup className="grid w-full grid-cols-2 gap-2">
              <Field>
                <FieldLabel htmlFor="radius-x" className="sr-only">
                  Radius X
                </FieldLabel>
                <Input id="radius" placeholder="0" defaultValue={0} />
              </Field>
              <Field>
                <FieldLabel htmlFor="radius-y" className="sr-only">
                  Radius Y
                </FieldLabel>
                <Input id="radius" placeholder="0" defaultValue={0} />
              </Field>
              <CollapsibleContent className="col-span-full grid grid-cols-subgrid gap-2">
                <Field>
                  <FieldLabel htmlFor="radius-x" className="sr-only">
                    Radius X
                  </FieldLabel>
                  <Input id="radius" placeholder="0" defaultValue={0} />
                </Field>
                <Field>
                  <FieldLabel htmlFor="radius-y" className="sr-only">
                    Radius Y
                  </FieldLabel>
                  <Input id="radius" placeholder="0" defaultValue={0} />
                </Field>
              </CollapsibleContent>
            </FieldGroup>
            <CollapsibleTrigger asChild>
              <Button variant="outline" size="icon">
                {isOpen ? (
                  <IconPlaceholder
                    lucide="MinimizeIcon"
                    tabler="IconMinimize"
                    hugeicons="MinusSignIcon"
                    phosphor="MinusIcon"
                    remixicon="RiSubtractLine"
                  />
                ) : (
                  <IconPlaceholder
                    lucide="MaximizeIcon"
                    tabler="IconMaximize"
                    hugeicons="PlusSignIcon"
                    phosphor="PlusIcon"
                    remixicon="RiAddLine"
                  />
                )}
              </Button>
            </CollapsibleTrigger>
          </Collapsible>
        </CardContent>
      </Card>
    </Example>
  )
}