Skip to main content
API contract 3.4
Premium

Czech local flavor inputs

Five inputs for Czech identifiers, each with the formatting and the input mask its format expects.

Premium

These inputs ship in habarico-enterprise. The czech-* formats themselves stay in the free vocabulary, so a backend may declare them either way — without the paid package they fall back to a plain text input.

They are selected by format, so a backend that declares format: "czech-ico" gets the right input without any frontend configuration once habarico-enterprise is installed.

ComponentformatBehaviour
CzechIcoInputczech-icoEight digits; optional button that fills the form from the ARES registry
CzechDicInputczech-dicPrefixes CZ automatically and keeps digits after it, max 12 characters
CzechBirthNumberInputczech-birth-numberFormats as XXXXXX/XXXX
CzechIdCardNumberInputczech-id-card-numberLetters and digits, max 10 characters; validates as 9 digits (first non-zero), 6 digits, or 6 digits with a two-letter series — before or after the number, each optionally followed by two more digits
CzechBankAccountInputczech-bank-accountPrefix (max 6 digits), account number (max 10 digits) and a bank picked from a list; a pasted account is split into its parts — see below

All five wrap React Admin's TextInput, so they accept the same props on top of the shared input props.

Type an IČO below to see the mask and the ARES lookup button.

Example​

<SchemaInput schema={customerSchema.fields.ico} source="ico" />

Pasting a bank account​

CzechBankAccountInput treats a paste like typing. The part you paste into — the prefix or the account number — gets the pasted digits at the caret, so pasting 4567/0800 behind 123 gives 1234567 with bank 0800. A paste that would make the part longer than it may be is refused as a whole, just like typing into a full part: nothing changes, not even the other parts.

The other parts are filled only when the pasted text carries them: 19-2000145399/0800 sets all three, 2000145399/0800 leaves the prefix as it is, and 19-2000145399 leaves the bank. A bank code that is not in the list clears the bank. The text must carry the part it is pasted into: the prefix accepts 123 or 1-123456/0800, but refuses 123456/0800, which has no prefix. Whitespace is ignored, and text that is not an account is not pasted at all.

Filling a form from ARES​

CzechIcoInput shows a lookup button only when it is given an onAresDataLoaded handler — the button has nothing to do without one. Wire it up by overriding the input in your InputProvider:

import {useInput} from 'react-admin';
import {useFormContext} from 'react-hook-form';
import {CzechIcoInput, CzechIcoInputProps} from '@eluvia/habarico-enterprise';

export const IcoInput = (props: CzechIcoInputProps) => {
  const {setValue} = useFormContext();
  const {
    field: {value},
  } = useInput({source: props.source});

  const onAresDataLoaded = (data: any) => {
    setValue('dic', data.dic);
    setValue('name', data.obchodniJmeno);
  };

  return <CzechIcoInput {...props} onAresDataLoaded={onAresDataLoaded} />;
};
caution

Without onAresDataLoaded the ARES button is not rendered at all. If the lookup seems to be missing, the handler is the first thing to check.

tip

The lookup calls ares.gov.cz straight from the browser. A failed request only shows a notification — the value the user typed is kept, so the form is never blocked by the registry being down.

CzechBankAccountField​

The display side has one component of its own. CzechBankAccountField is what format: "czech-bank-account" resolves to outside a form; the other four formats display as plain text through TextField.

<CzechBankAccountField source="bank_account" />
// 19-2000145399/0800 (Česká spořitelna, a.s.)

It takes only source from the shared field props. The stored value is split back into prefix, account number and bank code and joined as prefix-account/bankCode — the prefix is dropped when empty — followed by the bank's name in brackets, looked up from the bank code. An unknown code renders as Neznámá banka, and an empty value as -- rather than an empty cell.

caution

The bank name is not translated: the list is Czech, and so is the fallback label. The component is meant for Czech accounts, which is also what its czech-bank-account format says.

Schema mapping​

type: "string" with one of the five czech-* formats:

{"name": "ico", "type": "string", "format": "czech-ico"}
from habarico.serializers import AdminCharField, AdminModelSerializer


class CustomerSerializer(AdminModelSerializer):
    ico = AdminCharField(format="czech-ico", required=False)

    class Meta:
        model = Customer
        fields = ["id", "name", "ico"]

See also​