CheckboxRtl() — ui Function Reference

Architecture documentation for the CheckboxRtl() function in checkbox-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ CheckboxRtl() — ui Function Reference

Dependency Diagram

graph TD
  aa895667_e29e_b3e0_ce1b_1287d6bda518["CheckboxRtl()"]
  e1ac0f86_4f7b_8ccc_a111_2fae81cdb1c0["checkbox-rtl.tsx"]
  aa895667_e29e_b3e0_ce1b_1287d6bda518 -->|defined in| e1ac0f86_4f7b_8ccc_a111_2fae81cdb1c0
  style aa895667_e29e_b3e0_ce1b_1287d6bda518 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/checkbox-rtl.tsx lines 55–96

export function CheckboxRtl() {
  const { dir, t } = useTranslation(translations, "ar")

  return (
    <FieldGroup className="max-w-sm" dir={dir}>
      <Field orientation="horizontal">
        <Checkbox id="terms-checkbox-rtl" name="terms-checkbox" />
        <Label htmlFor="terms-checkbox-rtl">{t.acceptTerms}</Label>
      </Field>
      <Field orientation="horizontal">
        <Checkbox
          id="terms-checkbox-2-rtl"
          name="terms-checkbox-2"
          defaultChecked
        />
        <FieldContent>
          <FieldLabel htmlFor="terms-checkbox-2-rtl">
            {t.acceptTerms}
          </FieldLabel>
          <FieldDescription>{t.acceptTermsDescription}</FieldDescription>
        </FieldContent>
      </Field>
      <Field orientation="horizontal" data-disabled>
        <Checkbox id="toggle-checkbox-rtl" name="toggle-checkbox" disabled />
        <FieldLabel htmlFor="toggle-checkbox-rtl">
          {t.enableNotifications}
        </FieldLabel>
      </Field>
      <FieldLabel>
        <Field orientation="horizontal">
          <Checkbox id="toggle-checkbox-2" name="toggle-checkbox-2" />
          <FieldContent>
            <FieldTitle>{t.enableNotifications}</FieldTitle>
            <FieldDescription>
              {t.enableNotificationsDescription}
            </FieldDescription>
          </FieldContent>
        </Field>
      </FieldLabel>
    </FieldGroup>
  )
}