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