Input Example
How to use this input
Props
| Name | Type | Default | Description |
|---|---|---|---|
| type | enum (see below) | text | How an input works varies considerably depending on the value of its type attribute, hence the different types are covered in their own separate reference pages. |
| accept | On type file | - | Hint for expected file type in file upload controls. |
| alt | On type image | - | alt attribute for the image type. Required for accessibility. |
| autocapitalize | On type all except url, email and password | - | Controls automatic capitalization in inputted text. |
| autocomplete | On type all except checkbox, radio and buttons | - | Hint for form autofill feature. |
| capture | On type file | - | Media capture input method in file upload controls. |
| checked | On type checkbox, radio | - | Whether the command or control is checked. |
| dirname | On type *hidden, text, search, url, tel, email * | - | Name of form field to use for sending the element's directionality in form submission. |
| disabled | On type all | - | Whether the user can interract with the input or not. |
| form | On type all | - | Associates the control with a form element. |
| formaction | On type image, submit | - | URL to use for form submission. |
| formenctype | On type image, submit | - | Form data set encoding type to use for form submission. |
| formmethod | On type image, submit | - | HTTP method to use for form submission. |
| formnovalidate | On type image, submit | - | Bypass form control validation for form submission. |
| formtarget | On type image, submit | - | Browsing context for form submission. |
| height | On type image | - | Same as height attribute for img; vertical dimension. |
| list | On type all except hidden, password, checkbox, radio and buttons | - | Value of the id attribute of the datalist of autocomplete options. |
| max | On type date, month, week, time, datetime-local, number, range | - | Maximum value. |
| maxlength | On type text, search, url, tel, email, password | - | Maximum length (number of characters) of value. |
| min | On type date, month, week, time, datetime-local, number, range | - | Minimum value. |
| minlength | On type text, search, url, tel, email, password | - | Minimum length (number of characters) of value. |
| multiple | Boolean, On type email, file | - | Whether to allow multiple values. |
| name | On type all | - | Name of the form control. Submitted with the form as part of a name/value pair. |
| pattern | On type text, search, url, tel, email, password | - | Pattern the value must match to be valid. |
| placeholder | On type text, search, url, tel, email, password, number | - | Text that appears in the form control when it has no value set. |
| popovertarget | On type button | - | Designates an input type="button" as a control for a popover element. |
| popovertargetaction | On type button | - | Specifies the action that a popover control should perform. |
| readonly | Boolean, On type all except hidden, range, color, checkbox, radio, and buttons | - | The value is not editable. |
| required | Boolean, On type all except hidden, range, color, and buttons | - | A value is required or must be checked for the form to be submittable. |
| size | On type text, search, url, tel, email, password | - | Size of the control. |
| src | On type image | - | Same as src attribute for img; address of image resource. |
| step | On type date, month, week, time, datetime-local, number, range | - | Incremental values that are valid. |
| value | On type all except image | - | The value of the control. When specified in the HTML, corresponds to the initial value. |
| width | On type image | - | Same as width attribute for img. |
Input type
| Type | Description |
|---|---|
| button | A push button with no default behavior displaying the value of the value attribute, empty by default. |
| checkbox | A check box allowing single values to be selected/deselected. |
| color | A control for specifying a color; opening a color picker when active in supporting browsers. |
| date | A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers. |
| datetime-local | A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. |
| A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. | |
| file | A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select. |
| hidden | A control that is not displayed but whose value is submitted to the server. There is an example in the next column, but it's hidden! |
| image | A graphical submit button. Displays an image defined by the src attribute. The alt attribute displays if the image src is missing. |
| month | A control for entering a month and year, with no time zone. |
| number | A control for entering a number. Displays a spinner and adds default validation. Displays a numeric keypad in some devices with dynamic keypads. |
| password | A single-line text field whose value is obscured. Will alert user if site is not secure. |
| radio | A radio button, allowing a single value to be selected out of multiple choices with the same name value. |
| range | A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values. |
| reset | A button that resets the contents of the form to default values. Not recommended. |
| search | A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads. |
| submit | A button that submits the form. |
| tel | A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads. |
| text | The default value. A single-line text field. Line-breaks are automatically removed from the input value. |
| time | A control for entering a time value with no time zone. |
| url | A field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. |
| week | A control for entering a date consisting of a week-year number and a week number with no time zone. |
Playground
Import from filigran-ui :
Import {Input} from 'filigran-ui'
<Input type="email" placeholder="Email" />