Input
Input
All of the text based inputs are housed under one Input component. You can specify the type of input that you want to use using the type property.
With Bubbles, you'll normally never actually import any Input components, you'll just programmatically add them directly to the Form.
Types
text
The general purpose text input you'll use for the majority of your forms.
email
Email input, will enable autocomplete on compatible devices.
tel
Will get you the "tel" input, which will suggest phone numbers for the user.
In a future update, this input will also have properties to let the user select their country code via dropdown, but that is on the roadmap.
phone
Same as tel, just an alias.
password
Standard password input. Browsers will let users autofill these passwords.
date
The date input is not a calendar input. Bubbles has an opinion that entering a date is just easier by typing it in rather than selecting from a calendar. This will let the user enter the date in mm/dd/yyyy format.
This still needs to be localized.
number
This will render a number input.
time
This will render a time input.
textarea
This will render a textarea element.
stripe-card
This will render a stripe elements input get get credit card information from the user. You'll need to have a stripe account set up. View the second demo in the Form section section about specifically setting up Stripe.
Props
id string
All of the inputs that you provide to the form should have an id property. This will end up being the property name on the JSON object. If your id includes any periods in it like profile.name, the "name" will be nested under "profile".
type string
Specifies what input will be rendered from one of the choices above.
label string
The label that will describe what information needs to be entered. Will float up when the input is in focus. Best to keep this as short as possible.
error string
The error text that you want to display if this input fails validation. Best to keep this as short as possible.
validation string
The validation string you want to use for this form. See validateInputs for more details.
validate_on_blur boolean
If true, runs the validation checks when focus is lost from the input.
vob boolean
Just an alias for validate_on_blur. Set whichever is best for you.
desc string
This will be the small text below the input to describe it in more detail. It supports html so you can add anchor tags that will get rendered correctly.
value any
The value for this input it you want to pre-fill it.
disabled boolean false
Disabled the input from being used. The contents will still be sent when used with a form.
autocomplete boolean true
If you want to browser to autocomplete fields for the user.
margin boolean
Adds margin to the input.
bounds Array number
This is an array with the min and max values for an input. It's used only with the number input type.
rows number textarea
Specifies the height in rows to be used. It's used only with the textarea input type.
typeahead function text textarea
This lets you show a list of suggestions for a user as they are typing in a value. This is useful for helping populate an address, for example. The typeahead property is a function which takes in value the current value of the input and should return an array of string as possible suggestions.
multiply_by number number
The value of a numeric input will be multiplied by this number when calling the getFormData function.
to_js_date boolean date
If set to true, it will convert the date string into a JS Date object
stripe_key_name string stripe-input
To initialize Stripe, you'll need to pass in your stripe public_key. This variable is safe to expose to front end code. Save it in your .env file, and pass in the name of the key. The default key Bubbles will check for is "VITE_STRIPE_PUBLIC_KEY". Remember, only keys prefixed with VITE- are exposed to the front end by default, unless you have made a change to this.
Examples
This is a text input that has validation that checks for a string with a minimum length of 3
This is a password field that has a minimum requirement of 10 characters.
This is a date field
Type a number between 13 and 150
Enter your phone number. If your country code is not +1, enter your country code first.
Enter a time. When a form is submitted, time is submitted as a string from '0:00 to 23:59'
This is a textarea field with a height of 5 rows.
This is an example of typeahead to get results based on what the user is typing. It can be used on text and textarea inputs. Just add a function to the typeahead property that accepts the current value and responds with a Promise that array of options. Each option is the completed string.
Enter your credit card information. Stripe will load completely asynchronously when you request the component, after everything else mounts. You do not have to worry about performance issues.
You will always end up using stripe in a Form component instead of using this input directly. See more details in the form section about using Stripe with Bubbles.
Inputs can show a loading state by adding their ID to the loading store.
<script>
import { Input, fuzzySearch } from "bubbles-ui";
</script>
<Input
id="name"
type="text"
label="Full Name"
error="Please add your name"
validation="string|required|min:3"
vob={true}
desc="This is a text input that has validation that checks for a string with a minimum length of 3"
margin={true}
/>
<Input
id="password"
type="password"
label="Passphrase"
error="Your passphrase must be at least 10 characters"
validation="string|required|min:10"
vob={true}
desc="This is a password field that has a minimum requirement of 10 characters."
margin={true}
/>
<Input
id="date_of_birth"
type="date"
label="Date Of Birth"
error="This is not a valid date"
validation="required|date"
desc="This is a date field"
margin={true}
/>
<Input
id="age"
type="number"
label="What is your age"
error="Please select a number between 13 and 150"
validation="required|number|min:13|max:150"
desc="Type a number between 13 and 150"
margin={true}
bounds="{[13, 150]},"
/>
<Input
id="phone"
type="tel"
label="Enter your phone number"
error="Enter your phone number"
validation="required"
desc="Enter your phone number. If your country code is not +1, enter your country code first."
margin={true}
/>
<Input
id="address"
type="textarea"
label="Enter your address"
error="Enter your address"
validation="string"
vob={true}
desc="This is a textarea field with a height of 5 rows."
margin={true}
rows="5"
/>
<Input
id="favorite"
type="text"
label="Favorite U.S. State"
error="we can't find that one!"
desc="This is an example of typeahead to get results based on what the user is typing. It can be used on text and textarea inputs. Just add a function to the typeahead property that accepts the current value and responds with a Promise that array of options. Each option is the completed string. "
margin={true}
autocomplete={false}
typeahead={(input) => {
const states = [
{
name: "Alabama",
abbreviation: "AL",
},
{
name: "Alaska",
abbreviation: "AK",
},
//...,
{
name: "Wyoming",
abbreviation: "WY",
},
];
const filtered = fuzzySearch(input, states, { keys: ["name", "abbreviation"], sort: true });
return Promise.resolve(filtered.map((obj) => obj.item.name));
}}
/>
<Input
id="stripe"
type="stripe-card"
desc="Enter your credit card information. Stripe will load completely asynchronously when you request the component, after everything else mounts. You don't have to worry about performance issues."
margin={true}
stripe_key_name="VITE_STRIPE_PUBLIC_KEY"
/>
<Input
id="disabled"
type="text"
label="Disabled"
error="Please add your name"
margin={true}
disabled={true}
value="This is disabled"
/>
<Input
id="loading"
type="text"
label="Loading"
error="Please add your name"
margin={true}
disabled={true}
desc="Inputs can show a loading state by adding their ID to the loading store."
/>