mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-21 19:39:28 -05:00
Code Issues Packages Projects Releases 164 Wiki Activity

React Lib HTML Input Docs (#158)

Browse Source 
Co-authored-by: knugget <johannes@knugget.de>
This commit is contained in:
Matti Nannt
2022-11-23 14:13:20 +01:00
committed by GitHub
parent 542caf80d9
commit 104a3d22ff
18 changed files with 747 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/formbricks-com/lib/docsNavigation.ts
+28 -4
View File
@@ -35,6 +35,26 @@ const navigation = [
title: "Form Wrapper",
href: "/docs/react-form-library/form-wrapper",
},
{
title: "Input: Checkbox",
href: "/docs/react-form-library/input-checkbox",
},
{
title: "Input: Email",
href: "/docs/react-form-library/input-email",
},
{
title: "Input: Number",
href: "/docs/react-form-library/input-number",
},
{
title: "Input: Password",
href: "/docs/react-form-library/input-password",
},
{
title: "Input: Phone",
href: "/docs/react-form-library/input-phone",
},
{
title: "Input: Text",
href: "/docs/react-form-library/input-text",
@@ -47,10 +67,14 @@ const navigation = [
title: "Input: Radio Button",
href: "/docs/react-form-library/input-radio",
},
/* {
title: "Input: Checkbox",
href: "/docs/react-form-library/input-checkbox",
}, */
{
title: "Input: URL",
href: "/docs/react-form-library/input-url",
},
{
title: "Input: Search",
href: "/docs/react-form-library/input-search",
},
{
title: "Input: Submit",
href: "/docs/react-form-library/input-submit",
apps/formbricks-com/pages/docs/react-form-library/input-checkbox/Checkbox-input-form-survey-react-lib-easy-build-forms-fast-validation-multi-step.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

apps/formbricks-com/pages/docs/react-form-library/input-checkbox/index.mdx
+172
View File
@@ -0,0 +1,172 @@
import { Layout } from "@/components/docs/Layout";
import { Callout } from "@/components/shared/Callout";
import Image from "next/image";
import StyleClasses from "./Checkbox-input-form-survey-react-lib-easy-build-forms-fast-validation-multi-step.png";
export const meta = {
title: "Checkbox - Formbricks React Form Library",
};
The checkbox input uses [HTML's checkbox input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) and can display one or many options to a user. It's a great way to allow users to select multiple items from a list. Formbricks supports single and multiple checkboxes.
Like all other inputs it needs a `name` prop as an unique identifier:
```jsx
<Checkbox name="terms" />
```
## Single Checkbox
By default the checkbox input will render a single checkbox with a `boolean` value:
```jsx
<Checkbox
name="newsletter"
label="Monthly Newsletter"
help="Would you like to receive our newsletter?"
validation="accepted"
/>
# data output
true or false
```
## Multiple checkboxes
There are two ways to add several options to your checkbox input, both using the `options` attribute.
### Options: Array of values
The options attribute can handle an array of values which are interpreted both as label and value.
```jsx
<Checkbox
name="toppings"
label="What do you like on your Pizza?"
help="Take what you like"
options={["Pineapple", "Ananas", "Piña"]}
/>
# data output
label: Pineapple, value: Pineapple,
label: Ananas, value: Ananas,
label: Piña, value: Piña
```
### Options: Array of objects
The options attribute can also handle an array of objects containing label:value pairs. This allows for differences between the label and the data stored. You can also disable options:
```jsx
<Checkbox
name="allergies"
label="What are you allergic to?"
help="Tick all the boxes."
options={[
{
label: "Dogs",
value: "dogs",
config: {
disabled: true,
},
},
{
label: "These nuts",
value: "nuts",
},
{
label: "Bullshit",
value: "bs",
},
]}
/>
# data output
label: Dogs, value: dogs,
label: These nuts, value: nuts,
label: Bullshit, value: bs
```
## Props & Attributes
| Prop | Type | Default | Description |
| ---------------- | -------------------- | ------- | ---------------------------------------- | ---------------------------------------------------- |
| options | Array | - | Contains the options in your radio input |
| label | String | - | The label of the radio input. |
| legendClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| optionsClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| optionClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
### Universal props all inputs have
| Prop | What is it? | Required? | Shown to respondent? | Comment |
| ----------------- | --------------------------------------- | --------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | name of the field | yes | no | It is not shown to respondents but important as a unique identifier to understand which field holds what content. You cannot have two fields with the same name. |
| label | label of the field | yes | yes | The label above the input |
| help | help text | no | yes | You can add a little help text to each field to provide more detail on how to fill out the field. |
| validation | determines how field input is validated | no | depends on field input | If you want to validate the content of a field before the form is sent, you can do so with the validation prop. [read more](/docs/react-form-library/validation-errors) |
| id | own identifier for input | no | no | To target your input with css or javascript directly |
| outerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| wrapperClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| innerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| inputClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| helpClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messagesClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messageClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
### Styling with CSS
You can style your field with adding CSS to the pre-assigned classes. This is how the classes are assigned:
<Image
src={StyleClasses}
alt="Data log of a form created with the fastest react form builder"
className="rounded-lg"
/>
| CSS Class | Description |
| ------------------- | ------------------------------------------------------------------------------------------ |
| formbricks-form | The outermost wrapping element. |
| formbricks-outer | A wrapper around the label input, help text and error messages. |
| formbricks-legend | The legend (often a question) |
| formbricks-help | The help text itself. |
| formbricks-options | A wrapper around all options. |
| formbricks-option | A wrapper around each option. |
| formbricks-wrapper | A wrapper around the label and the input field (no help text). |
| formbricks-label | The label itself. |
| formbricks-inner | A wrapper around the input element. |
| formbricks-input | The input element itself, here the radio button. |
| formbricks-message | The element (or many elements) containing a message — often validation and error messages. |
| formbricks-messages | A wrapper around all the messages. |
### Styling with Tailwind
You can also use Tailwind to extend the classes, like so:
```jsx
<Checkbox
name="toppings"
label="What do you like on your Pizza?"
help="Take what you like"
options={["Pineapple", "Ananas", "Piña"]}
legendClassName="font-bold"
optionClassName="bg-gray rounded-sm"
/>
```
### Options-specific props to style it
| Prop | What is it? | Required? | Shown to respondent? | Comment |
| ---------------- | -------------------- | --------- | -------------------- | ---------------------------------------------------- |
| legendClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| optionsClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| optionClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
apps/formbricks-com/pages/docs/react-form-library/input-email/index.mdx
+79
View File
@@ -0,0 +1,79 @@
import { Layout } from "@/components/docs/Layout";
import { Callout } from "@/components/shared/Callout";
import Image from "next/image";
import StyleClasses from "../style-css/html-classes-of-formbricks-react-form-library-to-custom-style-surveys-and-forms.png";
export const meta = {
title: "Email Input - Formbricks React Form Library",
};
The `Email` input uses HTML's [native email input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email). It allows a user to enter an email.
Like all other inputs it needs a `name` prop as an unique identifier:
```jsx
<Email name="email" />
```
In most cases, it looks something like this:
```jsx
<Email name="email" label="What's your email?" placeholder="Email" validation="email" />
```
### Props & Attributes
| Prop | Type | Default | Description |
| ----------- | ------ | ------- | ------------------------------------------------ |
| placeholder | String | - | Placeholder before respondent clicks into field. |
### Universal props all inputs have
| Prop | What is it? | Required? | Shown to respondent? | Comment |
| ----------------- | --------------------------------------- | --------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | name of the field | yes | no | It is not shown to respondents but important as a unique identifier to understand which field holds what content. You cannot have two fields with the same name. |
| label | label of the field | yes | yes | The label above the input |
| help | help text | no | yes | You can add a little help text to each field to provide more detail on how to fill out the field. |
| validation | determines how field input is validated | no | depends on field input | If you want to validate the content of a field before the form is sent, you can do so with the validation prop. [read more](/docs/react-form-library/validation-errors) |
| id | own identifier for input | no | no | To target your input with css or javascript directly |
| outerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| wrapperClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| innerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| inputClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| helpClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messagesClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messageClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
### Styling with CSS
You can style your email field with adding CSS to the section classes. This is how the classes are named:
<Image
src={StyleClasses}
alt="Data log of a form created with the fastest react form builder"
className="rounded-lg"
/>
| CSS Class | Description |
| ------------------- | ------------------------------------------------------------------------------------------ |
| formbricks-form | The outermost wrapping element. |
| formbricks-outer | A wrapper around the label input, help text and error messages. |
| formbricks-help | The help text itself. |
| formbricks-wrapper | A wrapper around the label and the input field (no help text). |
| formbricks-label | The label itself. |
| formbricks-inner | A wrapper around the input element. |
| formbricks-input | The input element itself. |
| formbricks-message | The element (or many elements) containing a message — often validation and error messages. |
| formbricks-messages | A wrapper around all the messages. |
### Styling with Tailwind
You can also use Tailwind to extend the classes, like so:
```jsx
<Email name="email" label="What's your email?" inputClassName="bg-gray-800 my-5" />
```
Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
apps/formbricks-com/pages/docs/react-form-library/input-number/Number-input-best-easy-react-form-library-2023-forms-survey.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

apps/formbricks-com/pages/docs/react-form-library/input-number/index.mdx
+89
View File
@@ -0,0 +1,89 @@
import { Layout } from "@/components/docs/Layout";
import { Callout } from "@/components/shared/Callout";
import Image from "next/image";
import StyleClasses from "./Number-input-best-easy-react-form-library-2023-forms-survey.png";
export const meta = {
title: "Number Input - Formbricks React Form Library",
};
The `Number` input uses HTML's [native number input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number). It allows a user to enter a single integer or decimal value.
Like all other inputs it needs a `name` prop as an unique identifier:
```jsx
<Number name="age" />
```
In most cases, it looks something like this:
```jsx
<Number name="age" label="How old are you?" placeholder="42" min="1" max="130" step="1" />
```
### Props & Attributes
| Prop | Type | Default | Description |
| ---- | ------ | ------- | ------------------------------------------------------------------------------------ |
| min | Number | - | The input has to be at least X |
| max | Number | - | The input cannot be higher than Y |
| step | Number | auto | Specifies the granularity that the value must adhere to when increasing / decreasing |
### Universal props all inputs have
| Prop | What is it? | Required? | Shown to respondent? | Comment |
| ----------------- | --------------------------------------- | --------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | name of the field | yes | no | It is not shown to respondents but important as a unique identifier to understand which field holds what content. You cannot have two fields with the same name. |
| label | label of the field | yes | yes | The label above the input |
| help | help text | no | yes | You can add a little help text to each field to provide more detail on how to fill out the field. |
| validation | determines how field input is validated | no | depends on field input | If you want to validate the content of a field before the form is sent, you can do so with the validation prop. [read more](/docs/react-form-library/validation-errors) |
| id | own identifier for input | no | no | To target your input with css or javascript directly |
| outerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| wrapperClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| innerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| inputClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| helpClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messagesClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messageClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
### Styling with CSS
You can style your number field with adding CSS to the section classes. This is how the classes are named:
<Image
src={StyleClasses}
alt="Data log of a form created with the fastest react form builder"
className="rounded-lg"
/>
| CSS Class | Description |
| ------------------- | ------------------------------------------------------------------------------------------ |
| formbricks-form | The outermost wrapping element. |
| formbricks-outer | A wrapper around the label input, help text and error messages. |
| formbricks-help | The help text itself. |
| formbricks-wrapper | A wrapper around the label and the input field (no help text). |
| formbricks-label | The label itself. |
| formbricks-inner | A wrapper around the input element. |
| formbricks-input | The input element itself. |
| formbricks-message | The element (or many elements) containing a message — often validation and error messages. |
| formbricks-messages | A wrapper around all the messages. |
### Styling with Tailwind
You can also use Tailwind to extend the classes, like so:
```jsx
<Number
name="age"
label="How old are you?"
placeholder="42"
min="1"
max="130"
step="1"
inputClassName="font-bold"
/>
```
Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
apps/formbricks-com/pages/docs/react-form-library/input-password/Password-input-easy-react-form-library-build-forms-surveys-fast.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

apps/formbricks-com/pages/docs/react-form-library/input-password/index.mdx
+87
View File
@@ -0,0 +1,87 @@
import { Layout } from "@/components/docs/Layout";
import { Callout } from "@/components/shared/Callout";
import Image from "next/image";
import StyleClasses from "./Password-input-easy-react-form-library-build-forms-surveys-fast.png";
export const meta = {
title: "Password Input - Formbricks React Form Library",
};
The `Password` input uses HTML's [native password input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password). It allows a user to enter a password.
Like all other inputs it needs a `name` prop as an unique identifier:
```jsx
<Password name="password" />
```
In most cases, it looks something like this:
```jsx
<Password
name="password"
label="Password"
help="Enter secure password"
placeholder="ilikecoldcoffee"
validation="required"
/>
```
### Props & Attributes
| Prop | Type | Default | Description |
| ----------- | ------ | ------- | ------------------------------------------------ |
| minLength | Number | 0 | Limits min length accepted in the field |
| maxLength | Number | 524288 | Limits max length accepted in the field |
| placeholder | String | - | Placeholder before respondent clicks into field. |
### Universal props all inputs have
| Prop | What is it? | Required? | Shown to respondent? | Comment |
| ----------------- | --------------------------------------- | --------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | name of the field | yes | no | It is not shown to respondents but important as a unique identifier to understand which field holds what content. You cannot have two fields with the same name. |
| label | label of the field | yes | yes | The label above the input |
| help | help text | no | yes | You can add a little help text to each field to provide more detail on how to fill out the field. |
| validation | determines how field input is validated | no | depends on field input | If you want to validate the content of a field before the form is sent, you can do so with the validation prop. [read more](/docs/react-form-library/validation-errors) |
| id | own identifier for input | no | no | To target your input with css or javascript directly |
| outerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| wrapperClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| innerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| inputClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| helpClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messagesClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messageClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
### Styling with CSS
You can style your field with adding CSS to the pre-assigned classes. This is how the classes are assigned:
<Image
src={StyleClasses}
alt="Data log of a form created with the fastest react form builder"
className="rounded-lg"
/>
| CSS Class | Description |
| ------------------- | ------------------------------------------------------------------------------------------ |
| formbricks-form | The outermost wrapping element. |
| formbricks-outer | A wrapper around the label input, help text and error messages. |
| formbricks-help | The help text itself. |
| formbricks-wrapper | A wrapper around the label and the input field (no help text). |
| formbricks-label | The label itself. |
| formbricks-inner | A wrapper around the input element. |
| formbricks-input | The input element itself. |
| formbricks-message | The element (or many elements) containing a message — often validation and error messages. |
| formbricks-messages | A wrapper around all the messages. |
### Styling with Tailwind
You can also use Tailwind to extend the classes, like so:
```jsx
<Password name="password" label="Password" validation="required" outerClassName="bg-gray-800" />
```
Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
apps/formbricks-com/pages/docs/react-form-library/input-phone/Phone-react-library-for-surveys-and-form-build-fast-and-easy.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

apps/formbricks-com/pages/docs/react-form-library/input-phone/index.mdx
+81
View File
@@ -0,0 +1,81 @@
import { Layout } from "@/components/docs/Layout";
import { Callout } from "@/components/shared/Callout";
import Image from "next/image";
import StyleClasses from "./Phone-react-library-for-surveys-and-form-build-fast-and-easy.png";
export const meta = {
title: "Phone Input - Formbricks React Form Library",
};
The `Phone` input uses HTML's [native tel input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel). It allows a user to enter a telephone number.
Like all other inputs it needs a `name` prop as an unique identifier:
```jsx
<Phone name="phone" />
```
In most cases, it looks something like this:
```jsx
<Phone name="phone" label="Phone" help="Enter your phone number." placeholder="+1 123 444 567" />
```
### Props & Attributes
| Prop | Type | Default | Description |
| ----------- | ------ | ------- | ------------------------------------------------ |
| minLength | Number | 0 | Limits min length accepted in the field |
| maxLength | Number | 524288 | Limits max length accepted in the field |
| placeholder | String | - | Placeholder before respondent clicks into field. |
### Universal props all inputs have
| Prop | What is it? | Required? | Shown to respondent? | Comment |
| ----------------- | --------------------------------------- | --------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | name of the field | yes | no | It is not shown to respondents but important as a unique identifier to understand which field holds what content. You cannot have two fields with the same name. |
| label | label of the field | yes | yes | The label above the input |
| help | help text | no | yes | You can add a little help text to each field to provide more detail on how to fill out the field. |
| validation | determines how field input is validated | no | depends on field input | If you want to validate the content of a field before the form is sent, you can do so with the validation prop. [read more](/docs/react-form-library/validation-errors) |
| id | own identifier for input | no | no | To target your input with css or javascript directly |
| outerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| wrapperClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| innerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| inputClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| helpClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messagesClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messageClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
### Styling with CSS
You can style your field with adding CSS to the pre-assigned classes. This is how the classes are assigned:
<Image
src={StyleClasses}
alt="Data log of a form created with the fastest react form builder"
className="rounded-lg"
/>
| CSS Class | Description |
| ------------------- | ------------------------------------------------------------------------------------------ |
| formbricks-form | The outermost wrapping element. |
| formbricks-outer | A wrapper around the label input, help text and error messages. |
| formbricks-help | The help text itself. |
| formbricks-wrapper | A wrapper around the label and the input field (no help text). |
| formbricks-label | The label itself. |
| formbricks-inner | A wrapper around the input element. |
| formbricks-input | The input element itself. |
| formbricks-message | The element (or many elements) containing a message — often validation and error messages. |
| formbricks-messages | A wrapper around all the messages. |
### Styling with Tailwind
You can also use Tailwind to extend the classes, like so:
```jsx
<Phone name="phone" label="Phone" outerClassName="bg-gray-800" />
```
Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
apps/formbricks-com/pages/docs/react-form-library/input-radio/index.mdx
+9 -6
View File
@@ -100,10 +100,13 @@ label: "Do you agree?", value: "Do you agree?"
## Props & Attributes
| Prop | Type | Default | Description |
| ------- | ------ | ------- | ------------------------------------------------------------------------------------------------------- |
| options | Array | - | Contains the options in your radio input |
| label | String | - | The label (often a question) of the radio input. With no `option` attribute it's also the stored value. |
| Prop | Type | Default | Description |
| ---------------- | -------------------- | ------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------- |
| options | Array | - | Contains the options in your radio input |
| label | String | - | The label of the radio input. With no `option` attribute it's also the stored value. |
| legendClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| optionsClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| optionClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
### Universal props all inputs have
@@ -124,7 +127,7 @@ label: "Do you agree?", value: "Do you agree?"
### Styling with CSS
You can style your form with adding CSS to the pre-assigned classes. This is how the classes are assigned:
You can style your field with adding CSS to the pre-assigned classes. This is how the classes are assigned:
<Image
src={Styling}
@@ -162,7 +165,7 @@ You can also use Tailwind to extend the classes, like so:
/>
```
### Options-specific props
### Options-specific props to style it
| Prop | What is it? | Required? | Shown to respondent? | Comment |
| ---------------- | -------------------- | --------- | -------------------- | ---------------------------------------------------- |
apps/formbricks-com/pages/docs/react-form-library/input-search/Search-input-react-form-library-survey-forms-validation-multi-step-forms.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

apps/formbricks-com/pages/docs/react-form-library/input-search/index.mdx
+86
View File
@@ -0,0 +1,86 @@
import { Layout } from "@/components/docs/Layout";
import { Callout } from "@/components/shared/Callout";
import Image from "next/image";
import StyleClasses from "./Search-input-react-form-library-survey-forms-validation-multi-step-forms.png";
export const meta = {
title: "Search Input - Formbricks React Form Library",
};
The `Search` input uses HTML's [native search input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search). It allows a user to enter a search term.
Like all other inputs it needs a `name` prop as an unique identifier:
```jsx
<Search name="search" />
```
In most cases, it looks something like this:
```jsx
<Search name="search" placeholder="Search..." label="Search" />
```
### Props & Attributes
| Prop | Type | Default | Description |
| ----------- | ------ | ------- | ------------------------------------------------ |
| minLength | Number | 0 | Limits min length accepted in the field |
| maxLength | Number | 524288 | Limits max length accepted in the field |
| placeholder | String | - | Placeholder before respondent clicks into field. |
### Universal props all inputs have
| Prop | What is it? | Required? | Shown to respondent? | Comment |
| ----------------- | --------------------------------------- | --------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | name of the field | yes | no | It is not shown to respondents but important as a unique identifier to understand which field holds what content. You cannot have two fields with the same name. |
| label | label of the field | yes | yes | The label above the input |
| help | help text | no | yes | You can add a little help text to each field to provide more detail on how to fill out the field. |
| validation | determines how field input is validated | no | depends on field input | If you want to validate the content of a field before the form is sent, you can do so with the validation prop. [read more](/docs/react-form-library/validation-errors) |
| id | own identifier for input | no | no | To target your input with css or javascript directly |
| outerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| wrapperClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| innerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| inputClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| helpClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messagesClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messageClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
### Styling with CSS
You can style your field with adding CSS to the pre-assigned classes. This is how the classes are assigned:
<Image
src={StyleClasses}
alt="Data log of a form created with the fastest react form builder"
className="rounded-lg"
/>
| CSS Class | Description |
| ------------------- | ------------------------------------------------------------------------------------------ |
| formbricks-form | The outermost wrapping element. |
| formbricks-outer | A wrapper around the label input, help text and error messages. |
| formbricks-help | The help text itself. |
| formbricks-wrapper | A wrapper around the label and the input field (no help text). |
| formbricks-label | The label itself. |
| formbricks-inner | A wrapper around the input element. |
| formbricks-input | The input element itself. |
| formbricks-message | The element (or many elements) containing a message — often validation and error messages. |
| formbricks-messages | A wrapper around all the messages. |
### Styling with Tailwind
You can also use Tailwind to extend the classes, like so:
```jsx
<Search
name="search"
placeholder="Search..."
label="Search"
innerClassName="border-gray-700 border-2 rounded-full"
/>
```
Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
apps/formbricks-com/pages/docs/react-form-library/input-text/index.mdx
+12 -12
View File
@@ -48,7 +48,7 @@ In most cases, it looks something like this:
### Styling with CSS
You can style your form with adding CSS to the pre-assigned classes. This is how the classes are assigned:
You can style your field with adding CSS to the pre-assigned classes. This is how the classes are assigned:
<Image
src={StyleClasses}
@@ -56,17 +56,17 @@ You can style your form with adding CSS to the pre-assigned classes. This is how
className="rounded-lg"
/>
| CSS Class | Description |
| ------------------- | ----------------------------------------------------------------------------------------------- |
| formbricks-form | The outermost wrapping element. |
| formbricks-outer | A wrapper around the label input, help text and error messages. |
| formbricks-help | The help text itself. |
| formbricks-wrapper | A wrapper around the label and the input field (no help text). |
| formbricks-label | The label itself. |
| formbricks-inner | A wrapper around the input element. |
| formbricks-input | The input element itself. |
| formbricks-message | The element (or many elements) containing a message — most often validation and error messages. |
| formbricks-messages | A wrapper around all the messages. |
| CSS Class | Description |
| ------------------- | ------------------------------------------------------------------------------------------ |
| formbricks-form | The outermost wrapping element. |
| formbricks-outer | A wrapper around the label input, help text and error messages. |
| formbricks-help | The help text itself. |
| formbricks-wrapper | A wrapper around the label and the input field (no help text). |
| formbricks-label | The label itself. |
| formbricks-inner | A wrapper around the input element. |
| formbricks-input | The input element itself. |
| formbricks-message | The element (or many elements) containing a message — often validation and error messages. |
| formbricks-messages | A wrapper around all the messages. |
### Styling with Tailwind
apps/formbricks-com/pages/docs/react-form-library/input-textarea/index.mdx
+12 -12
View File
@@ -55,7 +55,7 @@ In most cases, it looks something like this:
### Styling with CSS
You can style your form with adding CSS to the pre-assigned classes. This is how the classes are assigned:
You can style your field with adding CSS to the pre-assigned classes. This is how the classes are assigned:
<Image
src={StyleClasses}
@@ -63,17 +63,17 @@ You can style your form with adding CSS to the pre-assigned classes. This is how
className="rounded-lg"
/>
| CSS Class | Description |
| ------------------- | ----------------------------------------------------------------------------------------------- |
| formbricks-form | The outermost wrapping element. |
| formbricks-outer | A wrapper around the label input, help text and error messages. |
| formbricks-help | The help text itself. |
| formbricks-wrapper | A wrapper around the label and the input field (no help text). |
| formbricks-label | The label itself. |
| formbricks-inner | A wrapper around the input element. |
| formbricks-input | The input element itself. |
| formbricks-message | The element (or many elements) containing a message — most often validation and error messages. |
| formbricks-messages | A wrapper around all the messages. |
| CSS Class | Description |
| ------------------- | ------------------------------------------------------------------------------------------ |
| formbricks-form | The outermost wrapping element. |
| formbricks-outer | A wrapper around the label input, help text and error messages. |
| formbricks-help | The help text itself. |
| formbricks-wrapper | A wrapper around the label and the input field (no help text). |
| formbricks-label | The label itself. |
| formbricks-inner | A wrapper around the input element. |
| formbricks-input | The input element itself. |
| formbricks-message | The element (or many elements) containing a message — often validation and error messages. |
| formbricks-messages | A wrapper around all the messages. |
### Styling with Tailwind
apps/formbricks-com/pages/docs/react-form-library/input-url/URL-field-input-best-easy-react-form-librari-hook-form-survey.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

apps/formbricks-com/pages/docs/react-form-library/input-url/index.mdx
+81
View File
@@ -0,0 +1,81 @@
import { Layout } from "@/components/docs/Layout";
import { Callout } from "@/components/shared/Callout";
import Image from "next/image";
import StyleClasses from "./URL-field-input-best-easy-react-form-librari-hook-form-survey.png";
export const meta = {
title: "URL Input - Formbricks React Form Library",
};
The `URL` input uses HTML's [native url input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url). It allows a user to enter a url.
Like all other inputs it needs a `name` prop as an unique identifier:
```jsx
<URL name="url" />
```
<Callout title="Consider using Text input" type="note">
The reason there is an URL input in HTML is the native URL validation. Since Formbricks offers URL
validation out of the box you can remove unneccessary complexity by using the [Text
input](/docs/react-form-library/input-text).
</Callout>
### Props & Attributes
| Prop | Type | Default | Description |
| ----------- | ------ | ------- | ------------------------------------------------ |
| minLength | Number | 0 | Limits min length accepted in the field |
| maxLength | Number | 524288 | Limits max length accepted in the field |
| placeholder | String | - | Placeholder before respondent clicks into field. |
### Universal props all inputs have
| Prop | What is it? | Required? | Shown to respondent? | Comment |
| ----------------- | --------------------------------------- | --------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | name of the field | yes | no | It is not shown to respondents but important as a unique identifier to understand which field holds what content. You cannot have two fields with the same name. |
| label | label of the field | yes | yes | The label above the input |
| help | help text | no | yes | You can add a little help text to each field to provide more detail on how to fill out the field. |
| validation | determines how field input is validated | no | depends on field input | If you want to validate the content of a field before the form is sent, you can do so with the validation prop. [read more](/docs/react-form-library/validation-errors) |
| id | own identifier for input | no | no | To target your input with css or javascript directly |
| outerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| wrapperClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| innerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| inputClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| helpClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messagesClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messageClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
### Styling with CSS
You can style your field with adding CSS to the pre-assigned classes. This is how the classes are assigned:
<Image
src={StyleClasses}
alt="Data log of a form created with the fastest react form builder"
className="rounded-lg"
/>
| CSS Class | Description |
| ------------------- | ------------------------------------------------------------------------------------------ |
| formbricks-form | The outermost wrapping element. |
| formbricks-outer | A wrapper around the label input, help text and error messages. |
| formbricks-help | The help text itself. |
| formbricks-wrapper | A wrapper around the label and the input field (no help text). |
| formbricks-label | The label itself. |
| formbricks-inner | A wrapper around the input element. |
| formbricks-input | The input element itself. |
| formbricks-message | The element (or many elements) containing a message — often validation and error messages. |
| formbricks-messages | A wrapper around all the messages. |
### Styling with Tailwind
You can also use Tailwind to extend the classes, like so:
```jsx
<URL name="url" label="Company website" outerClassName="bg-gray-800 my-5" />
```
Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
apps/formbricks-com/pages/docs/react-form-library/style-css/index.mdx
+11 -11
View File
@@ -84,17 +84,17 @@ Each form element component follows the same naming convention. This means that
className="rounded-lg"
/>
| CSS Class | Description |
| ------------------- | ----------------------------------------------------------------------------------------------- |
| formbricks-form | The outermost wrapping element. |
| formbricks-outer | A wrapper around the label input, help text and error messages. |
| formbricks-help | The help text itself. |
| formbricks-wrapper | A wrapper around the label and the input field (no help text). |
| formbricks-label | The label itself. |
| formbricks-inner | A wrapper around the input element. |
| formbricks-input | The input element itself. |
| formbricks-message | The element (or many elements) containing a message — most often validation and error messages. |
| formbricks-messages | A wrapper around all the messages. |
| CSS Class | Description |
| ------------------- | ------------------------------------------------------------------------------------------ |
| formbricks-form | The outermost wrapping element. |
| formbricks-outer | A wrapper around the label input, help text and error messages. |
| formbricks-help | The help text itself. |
| formbricks-wrapper | A wrapper around the label and the input field (no help text). |
| formbricks-label | The label itself. |
| formbricks-inner | A wrapper around the input element. |
| formbricks-input | The input element itself. |
| formbricks-message | The element (or many elements) containing a message — often validation and error messages. |
| formbricks-messages | A wrapper around all the messages. |
### In React app, a simple form with one field looks like this: