Data Type Inputs

Introduction

FHIR Data Type components are the basic building blocks of the Commure FHIR-native component library. These FHIR Data Type Input components provide an ergonomic and standardized way to collect data that matches the required shapes of the fields on any given FHIR resource. For example, if you wish to collect a patient's telephone information in order to store it in the Patient.telecom field, you can easily use the FhirContactPointInput component to do so.

ComponentSupported FHIR R4 Data Types
FhirAddressInputAddress
FhirAgeInputAge
FhirBase64BinaryInputBase64Binary
FhirBooleanInputBoolean
FhirCodeableConceptInputCodeableConcept
FhirCodeInputCode
FhirCodingInputCoding
FhirContactPointInputContactPoint
FhirCountInputCount
FhirDateInputDate, DateTime, Instant
FhirDistanceInputDistance
FhirDurationInputDuration
FhirHumanNameInputHumanName
FhirIdentifierInputIdentifier
FhirMarkdownInputMarkdown
FhirMoneyInputMoney
FhirMoneyQuantityInputMoneyQuantity
FhirMultiCodingInputCoding
FhirNumericInputInteger, PositiveInt, UnsignedInt, Decimal
FhirPeriodInputPeriod
FhirQuantityInputQuantity
FhirRangeInputRange
FhirSimpleQuantityInputSimpleQuantity
FhirTextInputString, Canonical, Id, Oid, Uri, Uuid
FhirTimeInputTime

FhirAddressInput

Address is an address expressed using postal conventions (as opposed to GPS or other location definition formats). This data type may be used to convey addresses for use in delivering mail as well as for visiting locations which might not be valid for mail delivery. There are a variety of postal address formats defined around the world.

Prop NameRequired?TypeDescription
cityPropsfalseobjectProps to spread to the FhirTextInput component for the city field.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
countryPropsfalseobjectProps for country feild.
disabledfalsebooleanWhether to appear as non-interactive.
districtPropsfalseobjectProps to spread to the FhirTextInput component for the district field.
inlineChildrenfalsebooleanWhether to render the children on a single line.
labelfalsestringLabel for the whole component.
linePropsfalseobjectProps to spread to the FhirMultiTextInput component for the line field.
onChangetrueFunctionChange handler that accepts Address object.
pathfalsestringRelevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
periodPropsfalseobjectProps to spread to the FhirPeriodInput component for the period field.
postalCodePropsfalseobjectProps to spread to the FhirTextInput component for the postalCode field.
showHelperTextfalsebooleanWhether to show the helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
splitStringfalsestringString to use for splitting entries in the line input field.
statePropsfalseobjectProps to spread to the FhirTextInput component for the state field.
textOnlyfalsebooleanWhether to display only text element and hide parts.
textPropsfalseobjectProps to spread to the FhirTextInput component for the text field.
typePropsfalseobjectProps to spread to the FhirCodeInput component for the type field.
usePropsfalseobjectProps to spread to the FhirCodeInput component for the use field.
validationfalseArrayRelevant FHIR OperationOutcomes for the entire subtree (including the root).
valuefalseFHIR Address value.

FhirAgeInput

Age is a variation of Quantity in which the value must be an expression of time.

Prop NameRequired?TypeDescription
allowClearfalsebooleanWhether to show a button to clear the input field.
allowUnboundUnitfalsebooleanAllow user to select a unit that is not bound to the value set.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
comparatorPropsfalseobjectProps to spread to FhirCodeInput for the comparator selector.
disabledfalsebooleanWhether to appear as non-interactive.
inlinefalsebooleanWhether to render the label and children on a single line.
inlineChildrenfalsebooleanWhether to render the children on a single line.
labelfalsestringLabel for the whole component.
namefalsestringHTML name attribute string to utilize for fields.
onChangetrueFunctionChange handler that accepts a SimpleQuantity object.
pathfalsestringRelevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperTextfalsebooleanWhether to show the helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
unitPropsfalseobjectProps to spread to QuantityUnitSuggest for the unit selector.
validationfalseArrayRelevant FHIR OperationOutcomes for the entire subtree (including the root).
valuefalseFHIR Quantity value.
valuePropsfalseobjectProps to spread to the FhirNumericInput value field.
valueSetfalseArrayValueset of units.
valueSetReferencefalsestringA reference string to a remote valueSet (as an alternative to passing the valueSet itself).
withComparatorfalsebooleanWhether to include comparator selection.

FhirBase64BinaryInput

Base64Binary is a stream of base64 encoded bytes that is commonly used to turn binary data (such as an image) into a string of ASCII characters that can be more easily transferred across systems.

Prop NameRequired?TypeDescription
base64DisplayPropsfalseobjectProps to spread to the base64DisplayProps component.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether to appear as non-interactive.
helperTextfalsestringOptional helper text.
inlinefalsebooleanWhether to render the label and children on a single line.
inputGroupPropsfalseobjectProps to spread to the InputGroup component.
inputIdfalsestringId to pass to the html input component.
labelfalsestringLabel for the whole component.
labelInfofalsestringOptional secondary text that appears after the label.
namefalsestringOptional name.
onChangetrueFunctionChange handler that accepts the value.
placeholderfalsestringPlaceholder text in the absence of any value.
showHelperTextfalsebooleanWhether to show helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
showPreviewfalsebooleanWhether to show a preview of the user input.
valuefalsestringFHIR Base64 value.

FhirBooleanInput

Boolean represents either true or false.

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether to appear as non-interactive.
inlinefalsebooleanWhether to render the label and children on a single line.
inputIdfalsestringId to pass to the html input component.
labelfalsestringLabel for the whole component.
namefalsestringOptional name.
onChangetrueFunctionChange handler that accepts the value.
showLabelsfalsebooleanWhether to show labels on input fields.
valuefalsebooleanFHIR Boolean value.

FhirCodeableConceptInput

CodeableConcept contains information about a concept as supplied by one or more referenced code systems. Code systems refer to the various terminologies and ontologies that are used in healthcare to encode concepts that could otherwise be misinterpreted without a reference-able definition.

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
codePropsfalseobjectProps to spread to the FhirCodeInput component.
disabledfalsebooleanWhether to appear as non-interactive.
hideTextfalsebooleanHide text field if it is empty and a ValueSet binding exists.
inlinefalsebooleanWhether to render the label and children on a single line.
inlineChildrenfalsebooleanWhether to render the children on a single line.
labelfalsestringLabel for the whole component.
loadingfalsebooleanWhether or not data is loading, to be passed through (injected by implementation).
namefalsestringHTML name attribute string to utilize for fields.
onChangetrueFunctionChange handler that accepts CodeableConcept object.
pathfalsestringRelevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperTextfalsebooleanWhether to show the helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
textPropsfalseobjectProps to spread to the FhirTextInput component for the text field.
validationfalseArrayRelevant FHIR OperationOutcomes for the entire subtree (including the root).
valuefalseFHIR CodeableConcept value.
valueSetfalseArrayValueset for the coding input.
valueSetReferencefalsestringA reference string to a remote valueSet (as an alternative to passing the valueSet itself), for the coding input.

FhirCodeInput

Code is used to indicate that the value is taken from a defined set of values. See FHIR's explanation of how to use codes in resources. Also see FhirCodingInput as it uses codes.

Prop NameRequired?TypeDescription
allowClearfalsebooleanWhether to enable a clear button on Selects.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether to appear as non-interactive.
helperTextfalsestringOptional helper text.
inlinefalsebooleanWhether to render the label and children on a single line.
inputIdfalsestringId to pass to the html input component.
labelfalsestringLabel for the whole component.
labelInfofalsestringOptional secondary text that appears after the label.
namefalsestringOptional name.
noResultsTextfalsestringText to show if the Select suggestion is unable to find a matching value.
onChangetrueFunctionChange handler that accepts the value.
placeholderfalsestringPlaceholder text in the absence of any value.
showCodefalsebooleanWhether to show the code.
showHelperTextfalsebooleanWhether to show helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
useRadioIfLessThanfalsenumberUses radio buttons if less than this number, uses a select dropdown if greater.
valuefalsestringFHIR code value.
valueSetfalseArrayValueSet to select from.
valueSetReferencefalsestringThe URL of the ValueSet to select from.

FhirCodingInput

Coding contains a reference to a single concept defined by a code system. Encoded concepts are used in healthcare to standardize the representation of concepts that could otherwise be misinterpreted without a reference-able definition.

Prop NameRequired?TypeDescription
allowClearfalsebooleanWhether to render a button that allows clearing the input field.
allowCreatefalsebooleanWhether to allow creation of new options.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether to appear as non-interactive.
helperTextfalsestringOptional helper text.
inlinefalsebooleanWhether to render the label and children on a single line.
inputIdfalsestringHTML id to set on the input element
labelfalsestringLabel for the whole component.
labelInfofalsestringOptional secondary text that appears after the label.
namefalsestringHTML name attribute string to utilize for fields.
noResultsTextfalsestringWhether to show code as an input field.
onChangetrueFunctionChange handler that accepts CodeableConcept object.
pathfalsestringRelevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
placeholderfalsestringPlaceholder string to show in empty input fields.
showCodefalsebooleanWhether to show code as an input field.
showHelperTextfalsebooleanWhether to show the helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
useRadioIfLessThanfalsenumberWhether to use radio buttons (instead of a select box).
validationfalseArrayRelevant FHIR OperationOutcomes for the entire subtree (including the root).
valuefalseFHIR Coding value.
valueSetfalseArrayValueset of units.
valueSetReferencefalsestringA reference string to a remote valueSet (as an alternative to passing the valueSet itself).

FhirContactPointInput

ContactPoint is used to capture the details needed to contact a person or organization.

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether to appear as non-interactive.
hideFieldsfalseArrayList of fields to hide from input.
inlineChildrenfalsebooleanWhether to render the children on a single line.
labelfalsestringLabel for the whole component.
onChangetrueFunctionChange handler that accepts ContactPoint object.
pathfalsestringRelevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
periodPropsfalseobjectProps to spread to the FhirPeriodInput component for the period field.
rankPropsfalseobjectProps to spread to the FhirNumericInput component for the rank field.
showHelperTextfalsebooleanWhether to show the helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
systemPropsfalseobjectProps to spread to the FhirCodeInput component for the system field.
systemValueSetfalseArrayValueset of units, for system.
usePropsfalseobjectProps to spread to the FhirCodeInput component for the use field.
useValueSetfalseArrayValueset of units, for use
validationfalseArrayRelevant FHIR OperationOutcomes for the entire subtree (including the root).
valuefalseFHIR ContactPoint value.
valuePropsfalseobjectProps for the value field.

FhirCountInput

Count is a defined variation of Quantity.

Prop NameRequired?TypeDescription
classNamefalsestring
comparatorPropsfalseobjectProps to spread to the FhirCodeInput component for the comparator selector.
comparatorValueSetfalseArrayValueset of comparators
disabledfalseboolean
inlinefalseboolean
inlineChildrenfalseboolean
labelfalsestring
namefalsestring
onChangetrueFunctionChange handler that accepts Count object
pathfalsestringFHIR path element path e.g. "Observation.value[x].SampledData"
showHelperTextfalseboolean
showLabelsfalsebooleanWhether to show labels on input fields
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields
validationfalseArrayValidations for the entire subtree (including the root)
valuefalseFHIR Count value
valuePropsfalseobjectProps to spread to the FhirNumericInput value field.

FhirDateInput

FhirDateInput captures user input for Date, DateTime, and Instant types. This component handles dates and times in accordance with those datatypes. Use the dateType prop to control which datatype the component is expressing.

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
dateTypefalsestringDictates whether to treat the value as a date or a dateTime.
disabledfalsebooleanWhether to appear as non-interactive.
formatfalsestringThe moment.js display format to use. Must be valid in accordance with the value supplied http://momentjs.com/docs/#/displaying/format/.
helperTextfalsestringOptional helper text.
initialMonthfalseThe initial month the calendar displays.
inlinefalsebooleanWhether to render the label and children on a single line.
inputIdfalsestringId to pass to the html input component.
labelfalsestringLabel for the whole component.
labelInfofalsestringOptional secondary text that appears after the label.
maxDatefalseThe latest date the user can select, as js date object.
minDatefalseThe earliest date the user can select, as js date object.
namefalsestringOptional name.
onChangetrueFunctionChange handler that accepts the value.
placeholderfalsestringPlaceholder text in the absence of any value.
showActionsBarfalsebooleanWhether the bottom bar displaying "Today" and "Clear" buttons should be shown below the calendar.
showHelperTextfalsebooleanWhether to show helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
showTimePickerfalsebooleanWhether to show a time input.
valuefalsestringFHIR Date/DateTime value.
writeFormatTypefalsestringJSON representation to use when saving the datetime.

FhirDistanceInput

Distance is a defined variation of Quantity in which values must be an expression of length.

Prop NameRequired?TypeDescription
allowClearfalsebooleanWhether to show a button to clear the input field.
allowUnboundUnitfalsebooleanAllow user to select a unit that is not bound to the value set.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
comparatorPropsfalseobjectProps to spread to FhirCodeInput for the comparator selector.
disabledfalsebooleanWhether to appear as non-interactive.
inlinefalsebooleanWhether to render the label and children on a single line.
inlineChildrenfalsebooleanWhether to render the children on a single line.
labelfalsestringLabel for the whole component.
namefalsestringHTML name attribute string to utilize for fields.
onChangetrueFunctionChange handler that accepts a SimpleQuantity object.
pathfalsestringRelevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperTextfalsebooleanWhether to show the helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
unitPropsfalseobjectProps to spread to QuantityUnitSuggest for the unit selector.
validationfalseArrayRelevant FHIR OperationOutcomes for the entire subtree (including the root).
valuefalseFHIR Quantity value.
valuePropsfalseobjectProps to spread to the FhirNumericInput value field.
valueSetfalseArrayValueset of units.
valueSetReferencefalsestringA reference string to a remote valueSet (as an alternative to passing the valueSet itself).
withComparatorfalsebooleanWhether to include comparator selection.

FhirDurationInput

Duration is a defined variation of Quantity in which values must be an expression of time.

Prop NameRequired?TypeDescription
allowClearfalsebooleanWhether to show a button to clear the input field.
allowUnboundUnitfalsebooleanAllow user to select a unit that is not bound to the value set.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
comparatorPropsfalseobjectProps to spread to FhirCodeInput for the comparator selector.
disabledfalsebooleanWhether to appear as non-interactive.
inlinefalsebooleanWhether to render the label and children on a single line.
inlineChildrenfalsebooleanWhether to render the children on a single line.
labelfalsestringLabel for the whole component.
namefalsestringHTML name attribute string to utilize for fields.
onChangetrueFunctionChange handler that accepts a SimpleQuantity object.
pathfalsestringRelevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperTextfalsebooleanWhether to show the helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
unitPropsfalseobjectProps to spread to QuantityUnitSuggest for the unit selector.
validationfalseArrayRelevant FHIR OperationOutcomes for the entire subtree (including the root).
valuefalseFHIR Quantity value.
valuePropsfalseobjectProps to spread to the FhirNumericInput value field.
valueSetfalseArrayValueset of units.
valueSetReferencefalsestringA reference string to a remote valueSet (as an alternative to passing the valueSet itself).
withComparatorfalsebooleanWhether to include comparator selection.

FhirHumanNameInput

HumanName contains the name of a human with text, parts and usage information. The multiple given parts and family name combine to form a single name. Where a person has alternate names that may be used in place of each other (e.g. Nicknames, Aliases), these are different instances of HumanName.

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether to appear as non-interactive.
familyPropsfalseobjectProps to spread to the FhirTextInput component for the family field.
givenPropsfalseobjectProps to spread to the FhirTextInput component for the given field.
hideFieldsfalseArrayWhich HumanName fields to hide.
inlinefalsebooleanWhether to render the label and children on a single line.
inlineChildrenfalsebooleanWhether to apply inline styling to this components children.
labelfalsestringLabel for the whole component.
onChangetrueFunctionChange handler that accepts HumanName object.
pathfalsestringFHIR path element path e.g. "Observation.value[x].SampledData".
periodPropsfalseobjectProps to spread to the FhirPeriodInput component for the period field.
prefixPropsfalseobjectProps to spread to the FhirTextInput component for the prefix field.
showHelperTextfalsebooleanWhether to show helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
splitStringfalsestringString to use for splitting names in multi-string input fields (given, prefix, and suffix).
suffixPropsfalseobjectProps to spread to the FhirTextInput component for the suffix field.
textOnlyfalsebooleanWhether to display only text element and hide parts.
textPropsfalseobjectProps to spread to the FhirTextInput component for the text field.
usePropsfalseobjectProps to spread to the FhirCodeInput component for the use field.
validationfalseArrayValidations for the entire subtree (including the root).
valuefalseFHIR HumanName value.
valueSetfalseArrayValueset of units, for use quantity.

FhirIdentifierInput

Identifier is used to identify an object or entity within a given system. A common use of identifier is to represent a patient's MRN (Medical Record Number) from a given health system.

Prop NameRequired?TypeDescription
assignerPropsfalseobjectProps to spread to the `referenceComponent` component for the assigner field.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether to appear as non-interactive.
inlineChildrenfalsebooleanWhether to apply inline styling to this components children.
labelfalsestringLabel for the whole component.
onChangetrueFunctionChange handler that accepts Identifier object.
pathfalsestringFHIR path element path e.g. "Observation.value[x].SampledData".
periodPropsfalseobjectProps to spread to the FhirPeriodInput component for the period field.
referenceComponentfalseComponent to render the Identifier.assigner value with.
showHelperTextfalsebooleanWhether to show helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
systemPropsfalseobjectProps to spread to the FhirTextInput component for the system field.
typePropsfalseobjectProps to spread to the FhirCodeableConceptInput component for the type field.
usePropsfalseobjectProps to spread to the FhirCodeInput component for the use field.
validationfalseArrayValidations for the entire subtree (including the root).
valuefalseFHIR Identifier value.
valuePropsfalseobjectProps to spread to the FhirTextInput component for the value field.

FhirMarkdownInput

Markdown is a string that can contain markdown syntax that can later be presented by a markdown presentation engine.

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalseboolean
helperTextfalsestringOptional helper text.
inlinefalsebooleanWhether to render the label and children on a single line.
inputGroupPropsfalseobjectProps to spread to InputGroup component
inputIdfalsestringId to pass to the html input component.
labelfalsestringLabel for the whole component.
labelInfofalsestringOptional secondary text that appears after the label.
namefalsestringOptional name.
onChangetrueFunctionChange handler that accepts the value.
placeholderfalsestringPlaceholder text in the absence of any value.
showHelperTextfalsebooleanWhether to show helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
showPreviewfalsebooleanWhether to show a preview of the user input.
valuefalsestringFHIR Markdown value.

FhirMoneyInput

Money is an amount and a currency.

Prop NameRequired?TypeDescription
allowClearfalsebooleanWhether to render a button that allows clearing the input field.
allowUnboundUnitfalsebooleanAllow user to select a unit that is not bound to the value set.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
currencyPropsfalseobjectProps to spread to the QuantityUnitSuggest component for the unit selector.
disabledfalsebooleanWhether to appear as non-interactive.
inlinefalsebooleanWhether to render the label and children on a single line.
inlineChildrenfalsebooleanWhether to render the children on a single line.
labelfalsestringLabel for the whole component.
namefalsestringHTML name attribute string to utilize for fields.
onChangetrueFunctionChange handler that accepts Money object.
pathfalsestringRelevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperTextfalsebooleanWhether to show the helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
validationfalseArrayRelevant FHIR OperationOutcomes for the entire subtree (including the root).
valuefalseFHIR Money value.
valuePropsfalseobjectProps to spread to the FhirNumericInput value field.
valueSetReferencefalsestringA reference string to a remote valueSet, for currency.

FhirMoneyQuantityInput

MoneyQuantity is a variation of Money that allows the amount to be expressed as a Quantity, allowing it to have comparators or be used within a ratio.

Prop NameRequired?TypeDescription
allowClearfalsebooleanWhether to show a button to clear the input field.
allowUnboundUnitfalsebooleanAllow user to select a unit that is not bound to the value set.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
comparatorPropsfalseobjectProps to spread to FhirCodeInput for the comparator selector.
disabledfalsebooleanWhether to appear as non-interactive.
inlinefalsebooleanWhether to render the label and children on a single line.
inlineChildrenfalsebooleanWhether to render the children on a single line.
labelfalsestringLabel for the whole component.
namefalsestringHTML name attribute string to utilize for fields.
onChangetrueFunctionChange handler that accepts a SimpleQuantity object.
pathfalsestringRelevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperTextfalsebooleanWhether to show the helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
unitPropsfalseobjectProps to spread to QuantityUnitSuggest for the unit selector.
validationfalseArrayRelevant FHIR OperationOutcomes for the entire subtree (including the root).
valuefalseFHIR Quantity value.
valuePropsfalseobjectProps to spread to the FhirNumericInput value field.
valueSetfalseArrayValueset of units.
valueSetReferencefalsestringA reference string to a remote valueSet (as an alternative to passing the valueSet itself).
withComparatorfalsebooleanWhether to include comparator selection.

FhirMultiCodingInput

MultiCoding contains a reference to multiple concepts defined by a code system. Encoded concepts are used in healthcare to standardize the representation of concepts that could otherwise be misinterpreted without a reference-able definition.

Prop NameRequired?TypeDescription
allowClearfalsebooleanWhether to render a button that allows clearing the input field.
allowCreatefalsebooleanWhether to allow creation of new options.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
createNewItemFromQueryfalse(query: string) => CodingAsync function that will create a new Coding options when prompted by the user.
disabledfalsebooleanWhether to appear as non-interactive.
helperTextfalsestringOptional helper text.
inlinefalsebooleanWhether to render the label and children on a single line.
inputIdfalsestringHTML id to set on the input element
labelfalsestringLabel for the whole component.
labelInfofalsestringOptional secondary text that appears after the label.
namefalsestringHTML name attribute string to utilize for fields.
noResultsTextfalsestringWhether to show code as an input field.
onChangetrue(values: any[]) => voidChange handler that accepts Codings.
onItemSelecttrue({ code }: { code: code }) => void
pathfalsestringRelevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
placeholderfalsestringPlaceholder string to show in empty input fields.
showCodefalsebooleanWhether to show code as an input field.
showHelperTextfalsebooleanWhether to show the helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
transformSelectedfalse(arg: any) => Coding[]Transformation function to apply to every option that gets selected.
useRadioIfLessThanfalsenumberWhether to use radio buttons (instead of a select box).
validationfalseArrayRelevant FHIR OperationOutcomes for the entire subtree (including the root).
valuefalseCoding[]List of FHIR Codings.
valueSetfalseCoding[]Valueset of units.
valueSetReferencefalsestringA reference string to a remote valueSet (as an alternative to passing the valueSet itself).

FhirNumericInput

FhirNumericInput captures user input for Integer, PositiveInt, UnsignedInt, and Decimal datatypes. Each of these variations have limitations imposed upon them that this component enforces. For example, the PositiveInt variation must be an integer greater than 1. Use the numberType prop to control which datatype the component is expressing.

Prop NameRequired?TypeDescription
autoCompletefalsebooleanWhether to use autoComplete.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
defaultValuefalsenumberThe value to default to if no value provided.
disabledfalsebooleanWhether to appear as non-interactive.
helperTextfalsestringOptional helper text.
inlinefalsebooleanWhether to render the label and children on a single line.
inputIdfalsestringId to pass to the html input component.
labelfalsestringLabel for the whole component.
labelInfofalsestringOptional secondary text that appears after the label.
maxfalseThe maximum value of the input.
minfalseThe minimum value of the input.
namefalsestringOptional name.
numberTypefalsestringWhich FHIR numeric type to use.
numericInputPropsfalseobjectProps to spread to the NumericInput component.
onBlurfalseFunctionChange handler called onBlur.
onChangefalseFunctionChange handler that accepts the value.
placeholderfalsestringPlaceholder text in the absence of any value.
precisionfalsenumberDecimal places to truncate at.
showHelperTextfalsebooleanWhether to show helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
valuefalsenumberFHIR decimal/integer/positiveInt/unsignedInt value.

FhirPeriodInput

Period specifies a range of time defined by a start and end date/time. The context of use will specify whether the entire range applies (e.g. "the patient was an inpatient of the hospital for this time range") or one value from the period applies (e.g. "give to the patient between 2 and 4 pm on 24-Jun 2013").

If the start element is missing, the start of the period is not known. If the end element is missing, it means that the period is ongoing, or the start may be in the past, and the end date in the future, which means that period is expected/planned to end at the specified time

Prop NameRequired?TypeDescription
childValidationfalseArrayRelevant FHIR OperationOutcomes for children in subtree (including the root).
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether to appear as non-interactive.
endPropsfalseobjectProps to spread to the FhirDateInput component for the end field.
formatfalsestringThe moment.js display format to use. Must be valid in accordance with the value supplied http://momentjs.com/docs/#/displaying/format/
inlinefalsebooleanWhether to render the label and children on a single line.
inlineChildrenfalsebooleanWhether to render the children on a single line.
labelfalsestringLabel for the whole component.
maxDatefalseThe latest date the user can select, as js date object.
minDatefalseThe earliest date the user can select, as js date object.
namefalsestringHTML name attribute string to utilize for fields.
onChangetrueFunctionChange handler that accepts Period object.
pathfalsestringRelevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showActionsBarfalsebooleanWhether the bottom bar displaying "Today" and "Clear" buttons should be shown below the calendar.
showHelperTextfalsebooleanWhether to show the helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
showTimePickerfalsebooleanWhether to show the time picker.
startPropsfalseobjectProps to spread to the FhirDateInput component for the start field.
timePickerPropsfalseobjectProps to spread to the time component inside the date range field.
validationfalseArrayRelevant FHIR OperationOutcomes for the entire subtree (including the root).
valuefalseFHIR Period value.
writeFormatTypefalsestringJSON represenation to use when saving the datetime

FhirQuantityInput

Quantity contains information about a measurable value, such as a patient's body temperature, white blood cell count, or the number of patients in a physician's census.

Prop NameRequired?TypeDescription
allowClearfalsebooleanWhether to show a button to clear the input field.
allowUnboundUnitfalsebooleanAllow user to select a unit that is not bound to the value set.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
comparatorPropsfalseobjectProps to spread to FhirCodeInput for the comparator selector.
disabledfalsebooleanWhether to appear as non-interactive.
inlinefalsebooleanWhether to render the label and children on a single line.
inlineChildrenfalsebooleanWhether to render the children on a single line.
labelfalsestringLabel for the whole component.
namefalsestringHTML name attribute string to utilize for fields.
onChangetrueFunctionChange handler that accepts a SimpleQuantity object.
pathfalsestringRelevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperTextfalsebooleanWhether to show the helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
unitPropsfalseobjectProps to spread to QuantityUnitSuggest for the unit selector.
validationfalseArrayRelevant FHIR OperationOutcomes for the entire subtree (including the root).
valuefalseFHIR Quantity value.
valuePropsfalseobjectProps to spread to the FhirNumericInput value field.
valueSetfalseArrayValueset of units.
valueSetReferencefalsestringA reference string to a remote valueSet (as an alternative to passing the valueSet itself).
withComparatorfalsebooleanWhether to include comparator selection.

FhirRangeInput

Range contains two ordered Quantity components (see also FhirQuantityInput) which define the high and low limits of a range. This is commonly used to represent instructions. For example: "give the patient between 2 and 4 tablets".

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether to appear as non-interactive.
highPropsfalseobjectProps to spread to the FhirNumericInput for high value field.
inlinefalsebooleanWhether to render the label and children on a single line.
inlineChildrenfalsebooleanWhether to render the children on a single line.
labelfalsestringLabel for the whole component.
lowPropsfalseobjectProps to spread to the FhirNumericInput for low value field.
namefalsestringHTML name attribute string to utilize for fields.
onChangetrueFunctionChange handler that accepts Address object.
pathfalsestringRelevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperTextfalsebooleanWhether to show the helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
unitPropsfalseobjectProps to spread to the QuantityUnitSuggest component for the unit selector.
validationfalseArrayRelevant FHIR OperationOutcomes for the entire subtree (including the root).
valuefalseFHIR Range value.
valueSetfalseArrayValueset of quantities, to be used for low and high.
valueSetReferencefalsestringA reference string to a remote valueSet (as an alternative to passing the valueSet itself), for use.

FhirSimpleQuantityInput

SimpleQuantity is a defined variation of Quantity in which no comparator is used.

Prop NameRequired?TypeDescription
classNamefalsestring
disabledfalseboolean
inlinefalseboolean
inlineChildrenfalseboolean
labelfalsestring
namefalsestring
onChangetrueFunctionChange handler that accepts SimpleQuantity object
showHelperTextfalseboolean
showLabelsfalsebooleanWhether to show labels on input fields
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields
unitPropsfalseobjectProps to spread to the QuantityUnitSuggest component for the unit selector.
valuefalseFHIR SimpleQuantity value
valuePropsfalseobjectProps to spread to the FhirNumericInput value field.
valueSetfalseArrayValueset of quantity units
valueSetReferencefalsestring

FhirTextInput

FhirTextInput captures user input for String, Canonical, Id, Oid, Uri, and Uuid datatypes. These are all represented and captured as simple strings, though some have restraints imposed on them. For example, an Id must be "Any combination of upper- or lower-case ASCII letters ('A'..'Z', and 'a'..'z', numerals ('0'..'9'), '-' and '.'), with a length limit of 64 characters."

Prop NameRequired?TypeDescription
autoCompletefalsebooleanWhether to autocomplete the input.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
defaultValuefalsestringThe value to default to if no value provided.
disabledfalsebooleanWhether to appear as non-interactive.
helperTextfalsestringOptional helper text.
inlinefalsebooleanWhether to render the label and children on a single line.
inputGroupPropsfalseobjectProps to spread to the InputGroup component.
inputIdfalsestringId to pass to the html input component.
labelfalsestringLabel for the whole component.
labelInfofalsestringOptional secondary text that appears after the label.
largeInputfalsebooleanWhether the text area should appear with large styling.
maxLengthfalsenumberMaximum allowed length of input.
namefalsestringOptional name.
onBlurfalseFunctionChange handler called onBlur.
onChangefalseFunctionChange handler that accepts the value.
patternfalseRegular Expression to validate input against.
placeholderfalsestringPlaceholder text in the absence of any value.
showHelperTextfalsebooleanWhether to show helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
showPlaceholdersfalsebooleanWhether to show placeholders in empty input fields.
smallInputfalsebooleanWhether the text area should appear with small styling.
typefalsestringHTML input type attribute.
valuefalsestringFHIR String/Canonical/Id/Oid/Uri/Uuid value.

FhirTimeInput

Time represents a time during the day, represented in the format "hh:mm:ss". For example, "13:30:48" is represented as 1:30 pm.

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether to appear as non-interactive.
helperTextfalsestringOptional helper text.
inlinefalsebooleanWhether to render the label and children on a single line.
labelfalsestringLabel for the whole component.
labelInfofalsestringOptional secondary text that appears after the label.
maxTimefalseThe latest time the user can select
minTimefalseThe earliest time the user can select.
namefalsestringOptional name.
onChangetrueFunctionChange handler that accepts the value.
precisionfalsestringTime precision: second or minute.
selectAllOnFocusfalsebooleanBoolean indicating whether to select both digit when clicking into time field.
showArrowButtonsfalsebooleanBoolean indicating whether to show clickable arrows above time fields to select time.
showHelperTextfalsebooleanWhether to show helper text.
showLabelsfalsebooleanWhether to show labels on input fields.
valuefalsestringFHIR Time value.