Ask a user for an Indian registration number

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

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

form!: FormGroup;

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

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

["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

View old example docs