Skip to contents

Create a Input component

Usage

calcite_input(...)

Arguments

...

named attributes passed to htmltools::tag()

Value

an object of class calcite_component which is a subclass of shiny.tag

Details

Properties

The following properties are provided by this component:

NameAttributeDescriptionValuesReflects to Attribute
acceptacceptSpecifies a comma separated list of unique file type specifiers for limiting accepted file types. This property only has an effect when type is "file". Read the native attribute's documentation on MDN for more info.stringFALSE
alignmentalignmentSpecifies the text alignment of the component's value."end" | "start"TRUE
autocompleteNASpecifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info.AutoFillFALSE
clearableclearableWhen true, a clear button is displayed when the component has a value. The clear button shows by default for "search", "time", and "date" types, and will not display for the "textarea" type.booleanTRUE
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanTRUE
filesNAWhen type is "file", specifies the component's selected files.FileListFALSE
formformThe id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.stringTRUE
groupSeparatorgroup-separatorWhen true, number values are displayed with a group separator corresponding to the language and country format.booleanTRUE
iconiconWhen true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.boolean | stringTRUE
iconFlipRtlicon-flip-rtlWhen true, the icon will be flipped when the element direction is right-to-left ("rtl").booleanTRUE
labellabelAccessible name for the component.stringFALSE
loadingloadingWhen true, a busy indicator is displayed.booleanTRUE
maxmaxWhen the component resides in a form, specifies the maximum value for type="number".numberTRUE
maxLengthmax-lengthWhen the component resides in a form, specifies the maximum length of text for the component's value.numberTRUE
messageOverridesNAUse this property to override individual strings used by the component.Check API referenceFALSE
minminWhen the component resides in a form, specifies the minimum value for type="number".numberTRUE
minLengthmin-lengthWhen the component resides in a form, specifies the minimum length of text for the component's value.numberTRUE
multiplemultipleWhen true, the component can accept more than one value. This property only has an effect when type is "email" or "file". Read the native attribute's documentation on MDN for more info.booleanFALSE
namenameSpecifies the name of the component. Required to pass the component's value on form submission.stringTRUE
numberButtonTypenumber-button-typeSpecifies the placement of the buttons for type="number"."horizontal" | "none" | "vertical"TRUE
numberingSystemnumbering-systemSpecifies the Unicode numeral system used by the component for localization."arab" | "arabext" | "latn"TRUE
patternpatternWhen the component resides in a form, specifies a regular expression (regex) pattern the component's value must match for validation. Read the native attribute's documentation on MDN for more info.stringFALSE
placeholderplaceholderSpecifies placeholder text for the component.stringFALSE
prefixTextprefix-textAdds text to the start of the component.stringFALSE
readOnlyread-onlyWhen true, the component's value can be read, but cannot be modified.booleanTRUE
requiredrequiredWhen true and the component resides in a form, the component must have a value in order for the form to submit.booleanTRUE
scalescaleSpecifies the size of the component."l" | "m" | "s"TRUE
statusstatusSpecifies the status of the input field, which determines message and icons."idle" | "invalid" | "valid"TRUE
stepstepSpecifies the granularity the component's value must adhere to."any" | numberTRUE
suffixTextsuffix-textAdds text to the end of the component.stringFALSE
typetypeCheck API reference"color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "textarea" | "time" | "url" | "week"TRUE
validationIconvalidation-iconSpecifies the validation icon to display under the component.boolean | stringTRUE
validationMessagevalidation-messageSpecifies the validation message to display under the component.stringFALSE
validityNAThe current validation state of the component.Check API referenceFALSE
valuevalueThe component's value.stringFALSE

Events

The following events are observed by shiny:

EventDescription
calciteInputChangeFires each time a new value is typed and committed.
calciteInputInputFires each time a new value is typed.

Slots

The following slots are provided by this component:

SlotDescription
actionA slot for positioning a calcite-button next to the component.

Examples

calcite_input()
#> <calcite-input></calcite-input>