Ask a user for an Indian registration number

const [bandNo, setBandNo] = useState("");
  const [family, setFamily] = useState("");
  const [position, setPosition] = useState("");

<GoabxFormItem label="Indian registration number" labelSize="large">
      <GoabBlock gap="m" direction="row">
        <GoabxFormItem label="Band #" helpText="3 digits">
          <GoabxInput
            onChange={(e) => setBandNo(e.value)}
            value={bandNo}
            name="bandNo"
            width="88px"
            maxLength={3}
          />
        </GoabxFormItem>
        <GoabxFormItem label="Family" helpText="Up to 5 digits">
          <GoabxInput
            onChange={(e) => setFamily(e.value)}
            value={family}
            name="family"
            width="105px"
            maxLength={5}
          />
        </GoabxFormItem>
        <GoabxFormItem label="Position" helpText="2 digits">
          <GoabxInput
            onChange={(e) => setPosition(e.value)}
            value={position}
            name="position"
            width="71px"
            maxLength={2}
          />
        </GoabxFormItem>
      </GoabBlock>
    </GoabxFormItem>

form!: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      bandNo: [""],
      family: [""],
      position: [""],
    });
  }

<goabx-form-item label="Indian registration number" labelSize="large">
  <goab-block gap="m" direction="row">
    <goabx-form-item label="Band #" helpText="3 digits">
      <goabx-input
        [formControl]="form.controls.bandNo"
        name="bandNo"
        width="88px"
        [maxLength]="3">
      </goabx-input>
    </goabx-form-item>
    <goabx-form-item label="Family" helpText="Up to 5 digits">
      <goabx-input
        [formControl]="form.controls.family"
        name="family"
        width="105px"
        [maxLength]="5">
      </goabx-input>
    </goabx-form-item>
    <goabx-form-item label="Position" helpText="2 digits">
      <goabx-input
        [formControl]="form.controls.position"
        name="position"
        width="71px"
        [maxLength]="2">
      </goabx-input>
    </goabx-form-item>
  </goab-block>
</goabx-form-item>

["band-input", "family-input", "position-input"].forEach((id) => {
  document.getElementById(id)?.addEventListener("_change", (e) => {
    console.log(`${id}:`, e.detail.value);
  });
});

<goa-form-item version="2" label="Indian registration number" labelsize="large">
  <goa-block gap="m" direction="row">
    <goa-form-item version="2" label="Band #" helptext="3 digits">
      <goa-input version="2"
        name="bandNo"
        id="band-input"
        width="88px"
        maxlength="3">
      </goa-input>
    </goa-form-item>
    <goa-form-item version="2" label="Family" helptext="Up to 5 digits">
      <goa-input version="2"
        name="family"
        id="family-input"
        width="105px"
        maxlength="5">
      </goa-input>
    </goa-form-item>
    <goa-form-item version="2" label="Position" helptext="2 digits">
      <goa-input version="2"
        name="position"
        id="position-input"
        width="71px"
        maxlength="2">
      </goa-input>
    </goa-form-item>
  </goa-block>
</goa-form-item>

Request a user’s Indian registration number with appropriate validation and context.

When to use

Use this pattern when:

Collecting Indigenous identity information
The registration number is required for benefits or services
You need to validate the format (3-digit band, up to 5-digit family, 2-digit position)

Considerations

Use separate fields for each component of the number
Set appropriate field widths to hint at expected input length
Provide clear help text for each field
Be respectful of the cultural significance of this information