Skip to main content

<FhirInput />

The <FhirInput /> is the equivalent of the <FhirValue />, but for forms input components.

It is a React Controlled component that can take many forms dependening on the Data type it needs to manipulate.

The big benefit is that it works with FHIR types natively. For example:

  • date, dateTime et all are formatter properly for FHIR
  • there is no empty string - empty strings are always undefined
  • terminology is supported, as well as references and resources search
  • composite data types are also supported: Identifier, HumanName, Address, ContactPoint...
tip

Although it can be use with a simple useState as shown below, it should probably be used with a form hook / system for maximum power.
See useFhirForm or useFhirResourceForm for more information.

Example usage​

const [name, setName] = useState<string | undefined>();
const [identifier, setIdentifier] = useState<Identifier | undefined>();
const [maritalStatus, setMaritalStatus] = useState<
  CodeableConcept | undefined
>();
const [patientRef, setPatientRef] = useState<Reference<Patient> | undefined>();

return (
  <>
    <FhirInput
      type="string"
      value={name}
      onChange={setName}
      label="Name"
      placeholder="Name"
      required
    />
    <FhirInput
      type="Identifier"
      value={identifier}
      onChange={setIdentifier}
      label="Identifier"
      mode="simple"
      required
    />
    <FhirInput
      type="CodeableConcept"
      value={maritalStatus}
      onChange={setMaritalStatus}
      label="Marital Status"
      source="http://hl7.org/fhir/ValueSet/marital-status"
      mode="radio"
    />
    <FhirInput
      type="Reference"
      resourceType="Patient"
      value={patientRef}
      onChange={setPatientRef}
    />
  </>
);

Each type has its own set of options that you can explore.

Preview​