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 optional — (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 * optional * — 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.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), fragment: true): FormKitSection<FormKitExtendableSchemaRoot>;
createSection(section: string, el: string | null | (() => FormKitSchemaNode)): FormKitSection<FormKitSchemaExtendableSection>;
createSection(section: string, el: string | (() => FormKitSchemaNode), fragment: false): FormKitSection<FormKitSchemaExtendableSection>;section — A single section of schemael — The element or a function that returns a schema node.fragmentReturns a FormKitExtendableSchemaRoot or a FormKitSchemaExtendableSection.
A feature that allows disabling children of this node.
disables(node: FormKitNode): void;node — A FormKitNode.Runs a callback over every section in a schema. if stopOnCallbackReturn is true and the callback returns a value, the loop will stop and return that value.
eachSection<T>(schema: FormKitSchemaDefinition, callback: (section: FormKitSchemaComponent | FormKitSchemaDOMNode, schemaParent: FormKitSchemaNode[], schema: FormKitSchemaCondition) => T, stopOnCallbackReturn?: boolean, schemaParent?: FormKitSchemaNode[]): T | void;schema — A FormKitSchemaNode array.callback — A callback to run on every section.stopOnCallbackReturn * optional * — If true, the loop will stop if the callback returns a value.schemaParent * optional * — The parent of the current schema node.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 * optional * — The values to extend on the base schema node.Finds a seciton by name in a schema.
findSection(schema: FormKitSchemaDefinition, target: string): [false, false] | [FormKitSchemaNode[] | false, FormKitSchemaCondition];schema — A FormKitSchemaDefinition 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): FormKitSchemaExtendableSection;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;
dirtyBehavior:'touched' | 'compare';
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?: FormKitSchemaDefinition) => FormKitSchemaNode) | FormKitSchemaNode;An 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];
};