CheckboxWithTitle() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ CheckboxWithTitle() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/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>
  )
}