InputGroupRtl() — ui Function Reference

Architecture documentation for the InputGroupRtl() function in input-group-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ InputGroupRtl() — ui Function Reference

Dependency Diagram

graph TD
  db64ad83_e83b_5304_8607_e26a5cca2a9a["InputGroupRtl()"]
  15228280_1880_5d4b_21b3_f513adb1dfa3["input-group-rtl.tsx"]
  db64ad83_e83b_5304_8607_e26a5cca2a9a -->|defined in| 15228280_1880_5d4b_21b3_f513adb1dfa3
  style db64ad83_e83b_5304_8607_e26a5cca2a9a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/input-group-rtl.tsx lines 74–119

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

  return (
    <div className="grid w-full max-w-sm gap-6">
      <InputGroup className="max-w-xs" dir={dir}>
        <InputGroupInput placeholder={t.placeholder} />
        <InputGroupAddon>
          <Search />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">{t.results}</InputGroupAddon>
      </InputGroup>
      <InputGroup dir={dir}>
        <InputGroupInput placeholder={t.searching} />
        <InputGroupAddon align="inline-end">
          <Spinner />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup dir={dir}>
        <InputGroupInput placeholder={t.savingChanges} />
        <InputGroupAddon align="inline-end">
          <InputGroupText>{t.saving}</InputGroupText>
          <Spinner />
        </InputGroupAddon>
      </InputGroup>
      <FieldGroup className="max-w-sm" dir={dir}>
        <Field>
          <FieldLabel htmlFor="rtl-textarea">{t.textareaLabel}</FieldLabel>
          <InputGroup dir={dir}>
            <InputGroupTextarea
              id="rtl-textarea"
              placeholder={t.textareaPlaceholder}
            />
            <InputGroupAddon align="block-end">
              <InputGroupText>{t.characterCount}</InputGroupText>
              <InputGroupButton variant="default" size="sm" className="ml-auto">
                {t.post}
              </InputGroupButton>
            </InputGroupAddon>
          </InputGroup>
          <FieldDescription>{t.textareaDescription}</FieldDescription>
        </Field>
      </FieldGroup>
    </div>
  )
}