CheckboxWithTitle() — ui Function Reference

Architecture documentation for the CheckboxWithTitle() function in checkbox-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ CheckboxWithTitle() — ui Function Reference

Dependency Diagram

graph TD
  03235254_6fd8_2f61_88cf_d004c026d9b5["CheckboxWithTitle()"]
  bc4dd4a3_3802_c072_36f2_265fd2bdee0f["checkbox-example.tsx"]
  03235254_6fd8_2f61_88cf_d004c026d9b5 -->|defined in| bc4dd4a3_3802_c072_36f2_265fd2bdee0f
  style 03235254_6fd8_2f61_88cf_d004c026d9b5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/checkbox-example.tsx lines 90–119

function CheckboxWithTitle() {
  return (
    <Example title="With Title">
      <FieldGroup>
        <FieldLabel htmlFor="toggle-2">
          <Field orientation="horizontal">
            <Checkbox id="toggle-2" defaultChecked />
            <FieldContent>
              <FieldTitle>Enable notifications</FieldTitle>
              <FieldDescription>
                You can enable or disable notifications at any time.
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
        <FieldLabel htmlFor="toggle-4">
          <Field orientation="horizontal" data-disabled>
            <Checkbox id="toggle-4" disabled />
            <FieldContent>
              <FieldTitle>Enable notifications</FieldTitle>
              <FieldDescription>
                You can enable or disable notifications at any time.
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
      </FieldGroup>
    </Example>
  )
}