The official FormKit Inputs plugin. This package contains the source code for all native HTML input types. Read the inputs documentation for usage instructions.
Applies attributes to a given schema section by applying a higher order function that merges a given set of attributes into the node.
$attrs(attrs: FormKitSchemaAttributes | (() => FormKitSchemaAttributes), section: FormKitSchemaExtendableSection): FormKitSchemaExtendableSection;attrs — Attributes to apply to a FormKitSchemaExtendableSection.section — A section to apply attributes to.FormKitSchemaExtendableSection
Extends a schema node with a given set of extensions.
$extend(section: FormKitSchemaExtendableSection, extendWith: Partial<FormKitSchemaNode>): FormKitSchemaExtendableSection;section — A section to apply an extension to.extendWith — A partial schema snippet to apply to the section.FormKitSchemaExtendableSection
Applies a condition to a given schema section.
$for(varName: string, inName: string, section: FormKitSchemaExtendableSection): (extensions: Record<string, Partial<FormKitSchemaNode>>) => FormKitSchemaNode;varName — The name of the variable that holds the current instance.inName — The variable we are iterating over.section — A section to repeat.FormKitSchemaExtendableSection
Applies a condition to a given schema section.
$if(condition: string, then: FormKitSchemaExtendableSection, otherwise?: FormKitSchemaExtendableSection): FormKitSchemaExtendableSection;condition — A schema condition to apply to a section.then — The section that applies if the condition is true.otherwise — (else) The section that applies if the condition is false.FormKitSchemaExtendableSection
Creates a root schema section.
$root(section: FormKitSchemaExtendableSection): FormKitExtendableSchemaRoot;section — A section to make a root from.FormKitSchemaExtendableSection
A feature that adds checkbox selection support.
checkboxes(node: FormKitNode): void;node — A FormKitNode.Adds icon props definition.
defaultIcon(sectionKey: string, defaultIcon: string): (node: FormKitNode) => void;sectionKey — the location the icon should be loaded.defaultIcon — the icon that should be loaded if a match is found in the user's CSS.A feature to add file handling support to an input.
files(node: FormKitNode): void;node — A FormKitNode.A feature that ensures the input has an initialValue prop.
initialValue(node: FormKitNode): void;node — A FormKitNode.Creates a new feature that generates a localization message of type ui for use on a given component.
localize(key: string, value?: string): (node: FormKitNode) => void;key — The key of the message.value — The value of the message.A feature that normalizes box types (checkboxes, radios).
normalizeBoxes(node: FormKitNode): FormKitMiddleware<{
prop: string | symbol;
value: any;
}>;node — A FormKitNode.A feature that converts the options prop to usable values, to be used by a feature or a plugin.
options(node: FormKitNode): void;node — A FormKitNode.A feature to check if the value being checked is the current value.
radios(node: FormKitNode): void;node — A FormKitNode.composable(key: string, schema: FormKitInputSchema): FormKitSchemaComposable;key — A new section key name.schema — The default schema in this composable slot.Creates a plugin based on a list of FormKitLibrary.
createLibraryPlugin(...libraries: FormKitLibrary[]): FormKitPlugin;libraries — One or many FormKitLibrary.Creates a new reusable section.
createSection(section: string, el: string | null | (() => FormKitSchemaNode), root: true): FormKitSection<FormKitExtendableSchemaRoot>;
createSection(section: string, el: string | null | (() => FormKitSchemaNode)): FormKitSection<FormKitSchemaExtendableSection>;
createSection(section: string, el: string | (() => FormKitSchemaNode), root: false): FormKitSection<FormKitSchemaExtendableSection>;section — A single section of schemael — The element or a function that returns a schema node.root — When true, returns a FormKitExtendableSchemaRoot. When false, returns a FormKitSchemaExtendableSection.Returns a FormKitExtendableSchemaRoot or a FormKitSchemaExtendableSection.
A feature that allows disabling children of this node.
disables(node: FormKitNode): void;node — A FormKitNode.Extends a single schema node with an extension. The extension can be any partial node including strings.
extendSchema(schema: FormKitSchemaNode, extension?: Partial<FormKitSchemaNode>): FormKitSchemaNode;schema — The base schema node.extension — The values to extend on the base schema node.Finds a seciton by name in a schema.
findSection(schema: FormKitSchemaNode[], target: string): [false, false] | [FormKitSchemaNode[], FormKitSchemaCondition];schema — A FormKitSchemaNode array.target — The name of the section to find.a tuple of the schema and the section or a tuple of false and false if not found.
A feature to add a submit handler and actions section.
form(node: FormKitNode): void;node — A FormKitNode.A feature that applies ignore="true" by default.
ignore(node: FormKitNode): void;node — A FormKitNode.Type guard for schema objects.
isSchemaObject(schema: Partial<FormKitSchemaNode>): schema is FormKitSchemaDOMNode | FormKitSchemaComponent | FormKitSchemaFormKit;schema — returns true if the node is a schema node but not a string or conditional.boolean
Checks if the current schema node is a slot condition.
isSlotCondition(node: FormKitSchemaNode): node is {
if: string;
then: string;
else: FormKitSchemaNode | FormKitSchemaNode[];
};node — A FormKitSchemaNode.boolean
{
if: '$slot.name',
then: '$slot.name',
else: []
} // this schema node would return true.A function to normalize an array of objects, array of strings, or object of key-values to use an array of objects with value and label properties.
normalizeOptions(options: FormKitOptionsProp): FormKitOptionsList;options — An un
-normalized FormKitOptionsProp.A list of FormKitOptionsList.
Converts the options prop to usable values.
select(node: FormKitNode): void;node — A formkit node.Creates an input schema with all of the wrapping base schema.
useSchema(inputSection: FormKitSection): FormKitExtendableSchemaRoot;inputSection — Content to store in the input section key location.A single file object in FormKit’s synthetic "FileList".
interface FormKitFile {
file?: File
name: string
}Options should always be formatted as an array of objects with label and value properties.
interface FormKitOptionsItem {
__original?: any
[index: string]: any
attrs?: {
disabled?: boolean
} & Record<string, any>
label: string
value: unknown
}Allows for prop extensions to be defined by using an interface whose keys are ignored, but values are applied to a union type. This allows for any third party code to extend the options prop by using module augmentation to add new values to the union type.
interface FormKitOptionsPropExtensions {
arrayOfNumbers: number[]
arrayOfStrings: string[]
optionsList: FormKitOptionsList
valueLabelPojo: Record<string | number, string>
}A function that is called with an extensions argument and returns a valid schema node.
interface FormKitSchemaExtendableSection {
_s?: string
(extensions: Record<string, Partial<FormKitSchemaNode>>): FormKitSchemaNode
}A function that when called, returns a function that can in turn be called with an extension parameter.
interface FormKitSection<T = FormKitSchemaExtendableSection> {
(...children: Array<FormKitSchemaExtendableSection | string>): T
}Synthetic props are props that are not explicitly declared as props, but should be treated as props to the outside world.
interface FormKitSyntheticPropsExtensions {
accept: string
action: string
actions: boolean
disabled: string | boolean
enctype: string
help: string
ignore: string | boolean
label: string
max: string | number
method: string
min: string | number
multiple: string | boolean
options: FormKitOptionsProp
preserve: string | boolean
preserveErrors: string | boolean
step: string | number
}A synthetic array-based "FileList".
type FormKitFileValue = FormKitFile[]Either a schema node, or a function that returns a schema node.
type FormKitInputSchema =
| ((
children?: string | FormKitSchemaNode[] | FormKitSchemaCondition
) => FormKitSchemaNode)
| FormKitSchemaNodeAn array of option items.
type FormKitOptionsList = FormKitOptionsItem[]The types of options that can be passed to the options prop.
type FormKitOptionsProp =
FormKitOptionsPropExtensions[keyof FormKitOptionsPropExtensions]The synthetic prop types.
type FormKitSyntheticProps = {
[Property in keyof FormKitSyntheticPropsExtensions]: FormKitSyntheticPropsExtensions[Property]
}