Form elements allow you to create flexible and beautiful Form layout. Form elements are just well known List View (List and List Item React components) but with few extensions.
Check out Framework7's Form Elements for their appearance.
<List form>
<!-- Text Input -->
<ListItem>
<FormLabel>Name</FormLabel>
<FormInput type="text" placeholder="Name"/>
</ListItem>
<!-- Password -->
<ListItem>
<FormLabel>Name</FormLabel>
<FormInput type="password" placeholder="Password"/>
</ListItem>
<!-- Select -->
<ListItem>
<FormLabel>Gender</FormLabel>
<FormInput type="select">
<option value="1">Male</option>
<option value="1">Female</option>
</FormInput>
</ListItem>
<!-- Switch -->
<ListItem>
<FormLabel>Switch</FormLabel>
<FormInput type="switch" onChange={onChange}></FormInput>
</ListItem>
<!-- Range -->
<ListItem>
<FormLabel>Range</FormLabel>
<FormInput type="range" min="0" max="100" step="1" value="90"></FormInput>
</ListItem>
<!-- Textarea -->
<ListItem>
<FormLabel>Textarea</FormLabel>
<FormInput type="textarea" placeholder="Textarea"></FormInput>
</ListItem>
</List>
Renders to:
<form class="list-block">
<ul>
<!-- Text Input -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Name</div>
<div class="item-input">
<input type="text" placeholder="Name"></div>
</div>
</div>
</li>
<!-- Password -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Password</div>
<div class="item-input">
<input type="password" placeholder="Password"></div>
</div>
</div>
</li>
<!-- Select -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Gender</div>
<div class="item-input">
<select type="select">
<option value="1">Male</option>
<option value="1">Female</option>
</select>
</div>
</div>
</div>
</li>
<!-- Switch -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Switch</div>
<div class="item-input">
<label class="label-switch">
<input type="checkbox" value="">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
<!-- Range -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Range</div>
<div class="item-input">
<div class="range-slider">
<input type="range" max="100" min="0" step="1"></div>
</div>
</div>
</div>
</li>
<!-- Textarea -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Textarea</div>
<div class="item-input">
<textarea type="textarea" placeholder="Textarea"></textarea>
</div>
</div>
</div>
</li>
</ul>
</form>
<List form>
<!-- Text Input -->
<ListItem>
<FormLabel floating>Name</FormLabel>
<FormInput type="text" placeholder="Name"/>
</ListItem>
<!-- Password -->
<ListItem>
<FormLabel floating>Name</FormLabel>
<FormInput type="password" placeholder="Password"/>
</ListItem>
...
</List>
<List form>
<!-- Text Input -->
<ListItem>
<FormInput type="text" placeholder="Name"/>
</ListItem>
<!-- Password -->
<ListItem>
<FormInput type="password" placeholder="Password"/>
</ListItem>
...
</List>
<List form>
<!-- Text Input -->
<ListItem>
<Icon slot="media" f7="person"></Icon>
<FormLabel floating>Name</FormLabel>
<FormInput type="text" placeholder="Name"/>
</ListItem>
<!-- Password -->
<ListItem>
<Icon slot="media" f7="lock"></Icon>
<FormLabel floating>Name</FormLabel>
<FormInput type="password" placeholder="Password"/>
</ListItem>
...
</List>
Prop | Type | Default | Description |
---|---|---|---|
<FormLabel> properties | |||
floating | boolean | Enables floating label (affects Material theme only) | |
<FormInput> properties | |||
type | string | Input type. All default HTML5 input type, and few special ones:
|
|
name | string | Input name | |
placeholder | string | Input placeholder | |
id | string | Input ID attribute | |
value | string/number | Input value | |
sizeNumber | string | Value of input's native "size" attribute | |
pattern | string | Value of input's native "pattern" attribute | |
accept | string/number | Value of input's native "accept" attribute | |
autocomplete | string | Value of input's native "autocomplete" attribute | |
autofocus | boolean | Value of input's native "autofocus" attribute | |
autosave | string | Value of input's native "autosave" atribute | |
checked | boolean | Marks input as checked | |
disabled | boolean | Marks input as disabled | |
max | string/number | Value of input's native "max" atribute | |
min | string/number | Value of input's native "min" atribute | |
step | string/number | Value of input's native "step" atribute | |
maxlength | string/number | Value of input's native "maxlength" atribute | |
minlength | string/number | Value of input's native "minlength" atribute | |
multiple | boolean | Value of input's native "multiple" atribute | |
readonly | boolean | Marks input as readonly | |
required | boolean | Marks input as required | |
style | string | Value if input's "style" attribute | |
color | string | Input color. One of default colors | |
wrap | boolean | true | Defines should the input be wraped with "item-input" element or not |
Event | Description | |
---|---|---|
<FormInput> events | ||
onFocus | Fired when user focused to input. | |
onFocusin | Fired when an element is about to receive focus. The main difference between this event and focus is that the latter doesn't bubble. | |
onBlur | Fired when user lost focus from input. | |
onFocusout | Fired when an element is about to lose focus. The main difference between this event and blur is that the latter doesn't bubble. | |
onBeforeinput | Fired before input value change. | |
onInput | Fired immediately when input value changed. Note: Input event triggers after beforeinput, keypress, keyup, keydown events. | |
onChange | Fired when blur if value changed. | |
onOnkeypress | You can use this event and onKeydown event for prevent input. onKeypress event fired after keydown and before keyup. | |
onKeyup | Fired when user released the keyboard button. | |
onKeydown | Fired when user starts pressing to the keyboard button. | |
onCompositionstart | Fired when the composition of a passage of text is prepared (similar to keydown for a keyboard input, but fires with special characters that require a sequence of keys and other inputs such as speech recognition or word suggestion on mobile). | |
onCompositionupdate | Fired when a character is added to a passage of text being composed (fires with special characters that require a sequence of keys and other inputs such as speech recognition or word suggestion on mobile). | |
onCompositionend | Fired when the composition of a passage of text has been completed or cancelled. | |
onClick | Fired when clicked to input. | |
onDblclick | Fired when double clicked to input. | |
onMousedown | Fired when a pointing device button (usually a mouse button) is pressed on an element. | |
onMouseup | Fired when a pointing device button (usually a mouse button) is released over an element. | |
onMouseenter | Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.
onMouseenter and onMouseover events are different. For more info:https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter |
|
onMouseover | Fired when a pointing device is moved onto the element that has the listener attached or onto one of its children. | |
onMouseleave | Fired when a pointing device (usually a mouse) is moved off the element that has the listener attached. | |
onMouseout | Fired when a pointing device (usually a mouse) is moved off the element that has the listener attached or off one of its children. Note that it is also triggered on the parent when you move onto a child element, since you move out of the visible space of the parent. | |
onMousemove | Fired when a pointing device (usually a mouse) is moved while over an element. | |
onWheel | Fired when a wheel button of a pointing device (usually a mouse) is rotated. This event replaces the non-standard deprecated mousewheel event. | |
onSelect | Fired when some text is being selected. The event might not be available for all elements in all languages. For example, select events can be dispatched only on form input and textarea elements. |