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.

Component	Supported FHIR R4 Data Types
FhirAddressInput	Address
FhirAgeInput	Age
FhirBase64BinaryInput	Base64Binary
FhirBooleanInput	Boolean
FhirCodeableConceptInput	CodeableConcept
FhirCodeInput	Code
FhirCodingInput	Coding
FhirContactPointInput	ContactPoint
FhirCountInput	Count
FhirDateInput	Date, DateTime, Instant
FhirDistanceInput	Distance
FhirDurationInput	Duration
FhirHumanNameInput	HumanName
FhirIdentifierInput	Identifier
FhirMarkdownInput	Markdown
FhirMoneyInput	Money
FhirMoneyQuantityInput	MoneyQuantity
FhirMultiCodingInput	Coding
FhirNumericInput	Integer, PositiveInt, UnsignedInt, Decimal
FhirPeriodInput	Period
FhirQuantityInput	Quantity
FhirRangeInput	Range
FhirSimpleQuantityInput	SimpleQuantity
FhirTextInput	String, Canonical, Id, Oid, Uri, Uuid, Url
FhirTimeInput	Time

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 Name	Required?	Type	Description
cityProps	false	object	Props to spread to the FhirTextInput component for the city field.
className	false	string	A space-delimited list of class names to pass along to a child element.
countryProps	false	object	Props for country feild.
disabled	false	boolean	Whether to appear as non-interactive.
districtProps	false	object	Props to spread to the FhirTextInput component for the district field.
inlineChildren	false	boolean	Whether to render the children on a single line.
label	false	string	Label for the whole component.
lineProps	false	object	Props to spread to the FhirMultiTextInput component for the line field.
onChange	true	Function	Change handler that accepts Address object.
path	false	string	Relevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
periodProps	false	object	Props to spread to the FhirPeriodInput component for the period field.
postalCodeProps	false	object	Props to spread to the FhirTextInput component for the postalCode field.
showHelperText	false	boolean	Whether to show the helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
splitString	false	string	String to use for splitting entries in the line input field.
stateProps	false	object	Props to spread to the FhirTextInput component for the state field.
textOnly	false	boolean	Whether to display only text element and hide parts.
textProps	false	object	Props to spread to the FhirTextInput component for the text field.
typeProps	false	object	Props to spread to the FhirCodeInput component for the type field.
useProps	false	object	Props to spread to the FhirCodeInput component for the use field.
validation	false	Array	Relevant FHIR OperationOutcomes for the entire subtree (including the root).
value	false		FHIR Address value.

FhirAgeInput

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

Prop Name	Required?	Type	Description
allowClear	false	boolean	Whether to show a button to clear the input field.
allowUnboundUnit	false	boolean	Allow user to select a unit that is not bound to the value set.
className	false	string	A space-delimited list of class names to pass along to a child element.
comparatorProps	false	object	Props to spread to FhirCodeInput for the comparator selector.
disabled	false	boolean	Whether to appear as non-interactive.
inline	false	boolean	Whether to render the label and children on a single line.
inlineChildren	false	boolean	Whether to render the children on a single line.
label	false	string	Label for the whole component.
name	false	string	HTML name attribute string to utilize for fields.
onChange	true	Function	Change handler that accepts a SimpleQuantity object.
path	false	string	Relevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperText	false	boolean	Whether to show the helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
unitProps	false	object	Props to spread to QuantityUnitSuggest for the unit selector.
validation	false	Array	Relevant FHIR OperationOutcomes for the entire subtree (including the root).
value	false		FHIR Quantity value.
valueProps	false	object	Props to spread to the FhirNumericInput value field.
valueSet	false	Array	Valueset of units.
valueSetReference	false	string	A reference string to a remote valueSet (as an alternative to passing the valueSet itself).
withComparator	false	boolean	Whether 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 Name	Required?	Type	Description
base64DisplayProps	false	object	Props to spread to the base64DisplayProps component.
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean	Whether to appear as non-interactive.
helperText	false	string	Optional helper text.
inline	false	boolean	Whether to render the label and children on a single line.
inputGroupProps	false	object	Props to spread to the InputGroup component.
inputId	false	string	Id to pass to the html input component.
label	false	string	Label for the whole component.
labelInfo	false	string	Optional secondary text that appears after the label.
name	false	string	Optional name.
onChange	true	Function	Change handler that accepts the value.
placeholder	false	string	Placeholder text in the absence of any value.
showHelperText	false	boolean	Whether to show helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
showPreview	false	boolean	Whether to show a preview of the user input.
value	false	string	FHIR Base64 value.

FhirBooleanInput

Boolean represents either true or false.

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean	Whether to appear as non-interactive.
inline	false	boolean	Whether to render the label and children on a single line.
inputId	false	string	Id to pass to the html input component.
label	false	string	Label for the whole component.
name	false	string	Optional name.
onChange	true	Function	Change handler that accepts the value.
showLabels	false	boolean	Whether to show labels on input fields.
value	false	boolean	FHIR 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 Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
codeProps	false	object	Props to spread to the FhirCodeInput component.
disabled	false	boolean	Whether to appear as non-interactive.
hideText	false	boolean	Hide text field if it is empty and a ValueSet binding exists.
inline	false	boolean	Whether to render the label and children on a single line.
inlineChildren	false	boolean	Whether to render the children on a single line.
label	false	string	Label for the whole component.
loading	false	boolean	Whether or not data is loading, to be passed through (injected by implementation).
name	false	string	HTML name attribute string to utilize for fields.
onChange	true	Function	Change handler that accepts CodeableConcept object.
path	false	string	Relevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperText	false	boolean	Whether to show the helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
textProps	false	object	Props to spread to the FhirTextInput component for the text field.
validation	false	Array	Relevant FHIR OperationOutcomes for the entire subtree (including the root).
value	false		FHIR CodeableConcept value.
valueSet	false	Array	Valueset for the coding input.
valueSetReference	false	string	A 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 Name	Required?	Type	Description
allowClear	false	boolean	Whether to enable a clear button on Selects.
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean	Whether to appear as non-interactive.
helperText	false	string	Optional helper text.
inline	false	boolean	Whether to render the label and children on a single line.
inputId	false	string	Id to pass to the html input component.
label	false	string	Label for the whole component.
labelInfo	false	string	Optional secondary text that appears after the label.
name	false	string	Optional name.
noResultsText	false	string	Text to show if the Select suggestion is unable to find a matching value.
onChange	true	Function	Change handler that accepts the value.
placeholder	false	string	Placeholder text in the absence of any value.
showCode	false	boolean	Whether to show the code.
showHelperText	false	boolean	Whether to show helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
useRadioIfLessThan	false	number	Uses radio buttons if less than this number, uses a select dropdown if greater.
value	false	string	FHIR code value.
valueSet	false	Array	ValueSet to select from.
valueSetReference	false	string	The 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 Name	Required?	Type	Description
allowClear	false	boolean	Whether to render a button that allows clearing the input field.
allowCreate	false	boolean	Whether to allow creation of new options.
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean	Whether to appear as non-interactive.
helperText	false	string	Optional helper text.
inline	false	boolean	Whether to render the label and children on a single line.
inputId	false	string	HTML id to set on the input element
label	false	string	Label for the whole component.
labelInfo	false	string	Optional secondary text that appears after the label.
name	false	string	HTML name attribute string to utilize for fields.
noResultsText	false	string	Whether to show code as an input field.
onChange	true	Function	Change handler that accepts CodeableConcept object.
path	false	string	Relevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
placeholder	false	string	Placeholder string to show in empty input fields.
showCode	false	boolean	Whether to show code as an input field.
showHelperText	false	boolean	Whether to show the helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
useRadioIfLessThan	false	number	Whether to use radio buttons (instead of a select box).
validation	false	Array	Relevant FHIR OperationOutcomes for the entire subtree (including the root).
value	false		FHIR Coding value.
valueSet	false	Array	Valueset of units.
valueSetReference	false	string	A 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 Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean	Whether to appear as non-interactive.
hideFields	false	Array	List of fields to hide from input.
inlineChildren	false	boolean	Whether to render the children on a single line.
label	false	string	Label for the whole component.
onChange	true	Function	Change handler that accepts ContactPoint object.
path	false	string	Relevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
periodProps	false	object	Props to spread to the FhirPeriodInput component for the period field.
rankProps	false	object	Props to spread to the FhirNumericInput component for the rank field.
showHelperText	false	boolean	Whether to show the helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
systemProps	false	object	Props to spread to the FhirCodeInput component for the system field.
systemValueSet	false	Array	Valueset of units, for system.
useProps	false	object	Props to spread to the FhirCodeInput component for the use field.
useValueSet	false	Array	Valueset of units, for use
validation	false	Array	Relevant FHIR OperationOutcomes for the entire subtree (including the root).
value	false		FHIR ContactPoint value.
valueProps	false	object	Props for the value field.

FhirCountInput

Count is a defined variation of Quantity.

Prop Name	Required?	Type	Description
className	false	string
comparatorProps	false	object	Props to spread to the FhirCodeInput component for the comparator selector.
comparatorValueSet	false	Array	Valueset of comparators
disabled	false	boolean
inline	false	boolean
inlineChildren	false	boolean
label	false	string
name	false	string
onChange	true	Function	Change handler that accepts Count object
path	false	string	FHIR path element path e.g. "Observation.value[x].SampledData"
showHelperText	false	boolean
showLabels	false	boolean	Whether to show labels on input fields
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields
validation	false	Array	Validations for the entire subtree (including the root)
value	false		FHIR Count value
valueProps	false	object	Props 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 Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
dateType	false	string	Dictates whether to treat the value as a date or a dateTime.
disabled	false	boolean	Whether to appear as non-interactive.
format	false	string	The moment.js display format to use. Must be valid in accordance with the value supplied http://momentjs.com/docs/#/displaying/format/.
helperText	false	string	Optional helper text.
initialMonth	false		The initial month the calendar displays.
inline	false	boolean	Whether to render the label and children on a single line.
inputId	false	string	Id to pass to the html input component.
label	false	string	Label for the whole component.
labelInfo	false	string	Optional secondary text that appears after the label.
maxDate	false		The latest date the user can select, as js date object.
minDate	false		The earliest date the user can select, as js date object.
name	false	string	Optional name.
onChange	true	Function	Change handler that accepts the value.
placeholder	false	string	Placeholder text in the absence of any value.
showActionsBar	false	boolean	Whether the bottom bar displaying "Today" and "Clear" buttons should be shown below the calendar.
showHelperText	false	boolean	Whether to show helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
showTimePicker	false	boolean	Whether to show a time input.
value	false	string	FHIR Date/DateTime value.
writeFormatType	false	string	JSON 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 Name	Required?	Type	Description
allowClear	false	boolean	Whether to show a button to clear the input field.
allowUnboundUnit	false	boolean	Allow user to select a unit that is not bound to the value set.
className	false	string	A space-delimited list of class names to pass along to a child element.
comparatorProps	false	object	Props to spread to FhirCodeInput for the comparator selector.
disabled	false	boolean	Whether to appear as non-interactive.
inline	false	boolean	Whether to render the label and children on a single line.
inlineChildren	false	boolean	Whether to render the children on a single line.
label	false	string	Label for the whole component.
name	false	string	HTML name attribute string to utilize for fields.
onChange	true	Function	Change handler that accepts a SimpleQuantity object.
path	false	string	Relevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperText	false	boolean	Whether to show the helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
unitProps	false	object	Props to spread to QuantityUnitSuggest for the unit selector.
validation	false	Array	Relevant FHIR OperationOutcomes for the entire subtree (including the root).
value	false		FHIR Quantity value.
valueProps	false	object	Props to spread to the FhirNumericInput value field.
valueSet	false	Array	Valueset of units.
valueSetReference	false	string	A reference string to a remote valueSet (as an alternative to passing the valueSet itself).
withComparator	false	boolean	Whether to include comparator selection.

FhirDurationInput

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

Prop Name	Required?	Type	Description
allowClear	false	boolean	Whether to show a button to clear the input field.
allowUnboundUnit	false	boolean	Allow user to select a unit that is not bound to the value set.
className	false	string	A space-delimited list of class names to pass along to a child element.
comparatorProps	false	object	Props to spread to FhirCodeInput for the comparator selector.
disabled	false	boolean	Whether to appear as non-interactive.
inline	false	boolean	Whether to render the label and children on a single line.
inlineChildren	false	boolean	Whether to render the children on a single line.
label	false	string	Label for the whole component.
name	false	string	HTML name attribute string to utilize for fields.
onChange	true	Function	Change handler that accepts a SimpleQuantity object.
path	false	string	Relevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperText	false	boolean	Whether to show the helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
unitProps	false	object	Props to spread to QuantityUnitSuggest for the unit selector.
validation	false	Array	Relevant FHIR OperationOutcomes for the entire subtree (including the root).
value	false		FHIR Quantity value.
valueProps	false	object	Props to spread to the FhirNumericInput value field.
valueSet	false	Array	Valueset of units.
valueSetReference	false	string	A reference string to a remote valueSet (as an alternative to passing the valueSet itself).
withComparator	false	boolean	Whether 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 Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean	Whether to appear as non-interactive.
familyProps	false	object	Props to spread to the FhirTextInput component for the family field.
givenProps	false	object	Props to spread to the FhirTextInput component for the given field.
hideFields	false	Array	Which HumanName fields to hide.
inline	false	boolean	Whether to render the label and children on a single line.
inlineChildren	false	boolean	Whether to apply inline styling to this components children.
label	false	string	Label for the whole component.
onChange	true	Function	Change handler that accepts HumanName object.
path	false	string	FHIR path element path e.g. "Observation.value[x].SampledData".
periodProps	false	object	Props to spread to the FhirPeriodInput component for the period field.
prefixProps	false	object	Props to spread to the FhirTextInput component for the prefix field.
showHelperText	false	boolean	Whether to show helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
splitString	false	string	String to use for splitting names in multi-string input fields (given, prefix, and suffix).
suffixProps	false	object	Props to spread to the FhirTextInput component for the suffix field.
textOnly	false	boolean	Whether to display only text element and hide parts.
textProps	false	object	Props to spread to the FhirTextInput component for the text field.
useProps	false	object	Props to spread to the FhirCodeInput component for the use field.
validation	false	Array	Validations for the entire subtree (including the root).
value	false		FHIR HumanName value.
valueSet	false	Array	Valueset 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 Name	Required?	Type	Description
assignerProps	false	object	Props to spread to the `referenceComponent` component for the assigner field.
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean	Whether to appear as non-interactive.
inlineChildren	false	boolean	Whether to apply inline styling to this components children.
label	false	string	Label for the whole component.
onChange	true	Function	Change handler that accepts Identifier object.
path	false	string	FHIR path element path e.g. "Observation.value[x].SampledData".
periodProps	false	object	Props to spread to the FhirPeriodInput component for the period field.
referenceComponent	false		Component to render the Identifier.assigner value with.
showHelperText	false	boolean	Whether to show helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
systemProps	false	object	Props to spread to the FhirTextInput component for the system field.
typeProps	false	object	Props to spread to the FhirCodeableConceptInput component for the type field.
useProps	false	object	Props to spread to the FhirCodeInput component for the use field.
validation	false	Array	Validations for the entire subtree (including the root).
value	false		FHIR Identifier value.
valueProps	false	object	Props 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 Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean
helperText	false	string	Optional helper text.
inline	false	boolean	Whether to render the label and children on a single line.
inputGroupProps	false	object	Props to spread to InputGroup component
inputId	false	string	Id to pass to the html input component.
label	false	string	Label for the whole component.
labelInfo	false	string	Optional secondary text that appears after the label.
name	false	string	Optional name.
onChange	true	Function	Change handler that accepts the value.
placeholder	false	string	Placeholder text in the absence of any value.
showHelperText	false	boolean	Whether to show helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
showPreview	false	boolean	Whether to show a preview of the user input.
value	false	string	FHIR Markdown value.

FhirMoneyInput

Money is an amount and a currency.

Prop Name	Required?	Type	Description
allowClear	false	boolean	Whether to render a button that allows clearing the input field.
allowUnboundUnit	false	boolean	Allow user to select a unit that is not bound to the value set.
className	false	string	A space-delimited list of class names to pass along to a child element.
currencyProps	false	object	Props to spread to the QuantityUnitSuggest component for the unit selector.
disabled	false	boolean	Whether to appear as non-interactive.
inline	false	boolean	Whether to render the label and children on a single line.
inlineChildren	false	boolean	Whether to render the children on a single line.
label	false	string	Label for the whole component.
name	false	string	HTML name attribute string to utilize for fields.
onChange	true	Function	Change handler that accepts Money object.
path	false	string	Relevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperText	false	boolean	Whether to show the helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
validation	false	Array	Relevant FHIR OperationOutcomes for the entire subtree (including the root).
value	false		FHIR Money value.
valueProps	false	object	Props to spread to the FhirNumericInput value field.
valueSetReference	false	string	A 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 Name	Required?	Type	Description
allowClear	false	boolean	Whether to show a button to clear the input field.
allowUnboundUnit	false	boolean	Allow user to select a unit that is not bound to the value set.
className	false	string	A space-delimited list of class names to pass along to a child element.
comparatorProps	false	object	Props to spread to FhirCodeInput for the comparator selector.
disabled	false	boolean	Whether to appear as non-interactive.
inline	false	boolean	Whether to render the label and children on a single line.
inlineChildren	false	boolean	Whether to render the children on a single line.
label	false	string	Label for the whole component.
name	false	string	HTML name attribute string to utilize for fields.
onChange	true	Function	Change handler that accepts a SimpleQuantity object.
path	false	string	Relevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperText	false	boolean	Whether to show the helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
unitProps	false	object	Props to spread to QuantityUnitSuggest for the unit selector.
validation	false	Array	Relevant FHIR OperationOutcomes for the entire subtree (including the root).
value	false		FHIR Quantity value.
valueProps	false	object	Props to spread to the FhirNumericInput value field.
valueSet	false	Array	Valueset of units.
valueSetReference	false	string	A reference string to a remote valueSet (as an alternative to passing the valueSet itself).
withComparator	false	boolean	Whether 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 Name	Required?	Type	Description
allowClear	false	boolean	Whether to render a button that allows clearing the input field.
allowCreate	false	boolean	Whether to allow creation of new options.
className	false	string	A space-delimited list of class names to pass along to a child element.
createNewItemFromQuery	false	(query: string) => Coding	Async function that will create a new Coding options when prompted by the user.
disabled	false	boolean	Whether to appear as non-interactive.
helperText	false	string	Optional helper text.
inline	false	boolean	Whether to render the label and children on a single line.
inputId	false	string	HTML id to set on the input element
label	false	string	Label for the whole component.
labelInfo	false	string	Optional secondary text that appears after the label.
name	false	string	HTML name attribute string to utilize for fields.
noResultsText	false	string	Whether to show code as an input field.
onChange	true	(values: any[]) => void	Change handler that accepts Codings.
onItemSelect	true	({ code }: { code: code }) => void
path	false	string	Relevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
placeholder	false	string	Placeholder string to show in empty input fields.
showCode	false	boolean	Whether to show code as an input field.
showHelperText	false	boolean	Whether to show the helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
transformSelected	false	(arg: any) => Coding[]	Transformation function to apply to every option that gets selected.
useRadioIfLessThan	false	number	Whether to use radio buttons (instead of a select box).
validation	false	Array	Relevant FHIR OperationOutcomes for the entire subtree (including the root).
value	false	Coding[]	List of FHIR Codings.
valueSet	false	Coding[]	Valueset of units.
valueSetReference	false	string	A 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 Name	Required?	Type	Description
autoComplete	false	boolean	Whether to use autoComplete.
className	false	string	A space-delimited list of class names to pass along to a child element.
defaultValue	false	number	The value to default to if no value provided.
disabled	false	boolean	Whether to appear as non-interactive.
helperText	false	string	Optional helper text.
inline	false	boolean	Whether to render the label and children on a single line.
inputId	false	string	Id to pass to the html input component.
label	false	string	Label for the whole component.
labelInfo	false	string	Optional secondary text that appears after the label.
max	false		The maximum value of the input.
min	false		The minimum value of the input.
name	false	string	Optional name.
numberType	false	string	Which FHIR numeric type to use.
numericInputProps	false	object	Props to spread to the NumericInput component.
onBlur	false	Function	Change handler called onBlur.
onChange	false	Function	Change handler that accepts the value.
placeholder	false	string	Placeholder text in the absence of any value.
precision	false	number	Decimal places to truncate at.
showHelperText	false	boolean	Whether to show helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
value	false	number	FHIR 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 Name	Required?	Type	Description
childValidation	false	Array	Relevant FHIR OperationOutcomes for children in subtree (including the root).
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean	Whether to appear as non-interactive.
endProps	false	object	Props to spread to the FhirDateInput component for the end field.
format	false	string	The moment.js display format to use. Must be valid in accordance with the value supplied http://momentjs.com/docs/#/displaying/format/
inline	false	boolean	Whether to render the label and children on a single line.
inlineChildren	false	boolean	Whether to render the children on a single line.
label	false	string	Label for the whole component.
maxDate	false		The latest date the user can select, as js date object.
minDate	false		The earliest date the user can select, as js date object.
name	false	string	HTML name attribute string to utilize for fields.
onChange	true	Function	Change handler that accepts Period object.
path	false	string	Relevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showActionsBar	false	boolean	Whether the bottom bar displaying "Today" and "Clear" buttons should be shown below the calendar.
showHelperText	false	boolean	Whether to show the helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
showTimePicker	false	boolean	Whether to show the time picker.
startProps	false	object	Props to spread to the FhirDateInput component for the start field.
timePickerProps	false	object	Props to spread to the time component inside the date range field.
validation	false	Array	Relevant FHIR OperationOutcomes for the entire subtree (including the root).
value	false		FHIR Period value.
writeFormatType	false	string	JSON 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 Name	Required?	Type	Description
allowClear	false	boolean	Whether to show a button to clear the input field.
allowUnboundUnit	false	boolean	Allow user to select a unit that is not bound to the value set.
className	false	string	A space-delimited list of class names to pass along to a child element.
comparatorProps	false	object	Props to spread to FhirCodeInput for the comparator selector.
disabled	false	boolean	Whether to appear as non-interactive.
inline	false	boolean	Whether to render the label and children on a single line.
inlineChildren	false	boolean	Whether to render the children on a single line.
label	false	string	Label for the whole component.
name	false	string	HTML name attribute string to utilize for fields.
onChange	true	Function	Change handler that accepts a SimpleQuantity object.
path	false	string	Relevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperText	false	boolean	Whether to show the helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
unitProps	false	object	Props to spread to QuantityUnitSuggest for the unit selector.
validation	false	Array	Relevant FHIR OperationOutcomes for the entire subtree (including the root).
value	false		FHIR Quantity value.
valueProps	false	object	Props to spread to the FhirNumericInput value field.
valueSet	false	Array	Valueset of units.
valueSetReference	false	string	A reference string to a remote valueSet (as an alternative to passing the valueSet itself).
withComparator	false	boolean	Whether 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 Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean	Whether to appear as non-interactive.
highProps	false	object	Props to spread to the FhirNumericInput for high value field.
inline	false	boolean	Whether to render the label and children on a single line.
inlineChildren	false	boolean	Whether to render the children on a single line.
label	false	string	Label for the whole component.
lowProps	false	object	Props to spread to the FhirNumericInput for low value field.
name	false	string	HTML name attribute string to utilize for fields.
onChange	true	Function	Change handler that accepts Address object.
path	false	string	Relevant FHIR element path e.g. "Observation.value[x].SampledData" to passthrough.
showHelperText	false	boolean	Whether to show the helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
unitProps	false	object	Props to spread to the QuantityUnitSuggest component for the unit selector.
validation	false	Array	Relevant FHIR OperationOutcomes for the entire subtree (including the root).
value	false		FHIR Range value.
valueSet	false	Array	Valueset of quantities, to be used for low and high.
valueSetReference	false	string	A 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 Name	Required?	Type	Description
className	false	string
disabled	false	boolean
inline	false	boolean
inlineChildren	false	boolean
label	false	string
name	false	string
onChange	true	Function	Change handler that accepts SimpleQuantity object
showHelperText	false	boolean
showLabels	false	boolean	Whether to show labels on input fields
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields
unitProps	false	object	Props to spread to the QuantityUnitSuggest component for the unit selector.
value	false		FHIR SimpleQuantity value
valueProps	false	object	Props to spread to the FhirNumericInput value field.
valueSet	false	Array	Valueset of quantity units
valueSetReference	false	string

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 Name	Required?	Type	Description
autoComplete	false	boolean	Whether to autocomplete the input.
className	false	string	A space-delimited list of class names to pass along to a child element.
defaultValue	false	string	The value to default to if no value provided.
disabled	false	boolean	Whether to appear as non-interactive.
helperText	false	string	Optional helper text.
inline	false	boolean	Whether to render the label and children on a single line.
inputGroupProps	false	object	Props to spread to the InputGroup component.
inputId	false	string	Id to pass to the html input component.
label	false	string	Label for the whole component.
labelInfo	false	string	Optional secondary text that appears after the label.
largeInput	false	boolean	Whether the text area should appear with large styling.
maxLength	false	number	Maximum allowed length of input.
name	false	string	Optional name.
onBlur	false	Function	Change handler called onBlur.
onChange	false	Function	Change handler that accepts the value.
pattern	false		Regular Expression to validate input against.
placeholder	false	string	Placeholder text in the absence of any value.
showHelperText	false	boolean	Whether to show helper text.
showLabels	false	boolean	Whether to show labels on input fields.
showPlaceholders	false	boolean	Whether to show placeholders in empty input fields.
smallInput	false	boolean	Whether the text area should appear with small styling.
type	false	string	HTML input type attribute.
value	false	string	FHIR 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 Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean	Whether to appear as non-interactive.
helperText	false	string	Optional helper text.
inline	false	boolean	Whether to render the label and children on a single line.
label	false	string	Label for the whole component.
labelInfo	false	string	Optional secondary text that appears after the label.
maxTime	false		The latest time the user can select
minTime	false		The earliest time the user can select.
name	false	string	Optional name.
onChange	true	Function	Change handler that accepts the value.
precision	false	string	Time precision: second or minute.
selectAllOnFocus	false	boolean	Boolean indicating whether to select both digit when clicking into time field.
showArrowButtons	false	boolean	Boolean indicating whether to show clickable arrows above time fields to select time.
showHelperText	false	boolean	Whether to show helper text.
showLabels	false	boolean	Whether to show labels on input fields.
value	false	string	FHIR Time value.