mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-05-12 08:51:20 -05:00
Code Issues Packages Projects Releases 100 Wiki Activity

update docs

Browse Source
This commit is contained in:
Matthias Nannt
2022-11-23 14:50:09 +01:00
parent d8d2ac115d
commit 3444f5b828
12 changed files with 33 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/formbricks-com/pages/docs/react-form-library/input-checkbox/index.mdx
+10 -28
View File
@@ -17,7 +17,7 @@ Like all other inputs it needs a `name` prop as an unique identifier:
## Single Checkbox
By default the checkbox input will render a single checkbox with a `boolean` value:
By default the checkbox input will render a single checkbox returning a `boolean` value:
```jsx
<Checkbox
@@ -26,10 +26,6 @@ By default the checkbox input will render a single checkbox with a `boolean` val
help="Would you like to receive our newsletter?"
validation="accepted"
/>
# data output
true or false
```
## Multiple checkboxes
@@ -47,18 +43,11 @@ The options attribute can handle an array of values which are interpreted both a
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:
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 add an optional config object:
```jsx
<Checkbox
@@ -83,24 +72,17 @@ The options attribute can also handle an array of objects containing label:value
},
]}
/>
# 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) |
| Prop | Type | Default | Description | |
| ---------------- | -------------------- | ------- | ------------------------------------------- | ---------------------------------------------------- |
| options | Array | - | Contains the options in your checkbox input | |
| label | String | - | The label of the checkbox 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
@@ -140,7 +122,7 @@ You can style your field with adding CSS to the pre-assigned classes. This is ho
| 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-input | The input element itself, here the checkbox button. |
| formbricks-message | The element (or many elements) containing a message — often validation and error messages. |
| formbricks-messages | A wrapper around all the messages. |
apps/formbricks-com/pages/docs/react-form-library/input-email/index.mdx
+1 -1
View File
@@ -18,7 +18,7 @@ Like all other inputs it needs a `name` prop as an unique identifier:
In most cases, it looks something like this:
```jsx
<Email name="email" label="What's your email?" placeholder="Email" validation="email" />
<Email name="email" label="What's your email?" placeholder="Email" />
```
### Props & Attributes
apps/formbricks-com/pages/docs/react-form-library/input-number/index.mdx
+6 -5
View File
@@ -23,11 +23,12 @@ In most cases, it looks something like this:
### 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 |
| 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 |
| placeholder | String | - | Placeholder before respondent clicks into field. |
### Universal props all inputs have
apps/formbricks-com/pages/docs/react-form-library/input-search/index.mdx
+1 -1
View File
@@ -7,7 +7,7 @@ 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.
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 and is interpreted differently than the normal `text` input from the browser, e.g. it adds a little `x` inside the input field to remove the input again.
Like all other inputs it needs a `name` prop as an unique identifier:
apps/formbricks-com/pages/docs/react-form-library/validation-errors/index.mdx
+9 -6
View File
@@ -27,12 +27,15 @@ Only if all four requirements are met, the form can be submitted. If not an erro
### Available rules
| Rule | Explanation | Example |
| -------- | -------------------------------------------------------------------------- | ---------- |
| required | Only accepts non-empty fields | “required” |
| number | Only accepts fields with a number or float value | “number” |
| min | Only accepts number values that are greater or equal to the value provided | “min:10” |
| max | Only accepts number values that are greater or equal to the value provided | “max:50” |
| Rule | Explanation | Example |
| ------------ | ------------------------------------------------------------------------------------------- | ---------- |
| **accepted** | Only accepts `true`, `1`, `"on"`, and `"yes"` as values (useful e.g. for single checkboxes) | "accepted" |
| **email** | Only accepts valid email address format | "email" |
| **min** | Only accepts number values that are greater or equal to the value provided | "min:10" |
| **max** | Only accepts number values that are greater or equal to the value provided | "max:50" |
| **number** | Only accepts fields with a number or float value | "number" |
| **required** | Only accepts non-empty fields | "required" |
| **url** | Only accepts valid url format (including protocol) | "url" |
### Message position
packages/react/src/components/inputs/Email.tsx
+2 -10
View File
@@ -2,9 +2,7 @@ import { useEffectUpdateSchema } from "../../lib/schema";
import { NameRequired, UniversalInputProps } from "../../types";
import { Input, InputProps } from "../shared/Input";
interface EmailUniqueProps {
placeholder?: string;
}
interface EmailUniqueProps {}
type Props = EmailUniqueProps & InputProps & UniversalInputProps & NameRequired;
@@ -13,11 +11,5 @@ const inputType = "email";
export function Email(props: Props) {
useEffectUpdateSchema(props, inputType);
return (
<Input
type={{ html: inputType, formbricks: inputType }}
additionalProps={{ placeholder: props.placeholder }}
{...props}
/>
);
return <Input type={{ html: inputType, formbricks: inputType }} {...props} />;
}
packages/react/src/components/inputs/Password.tsx
-2
View File
@@ -5,7 +5,6 @@ import { Input, InputProps } from "../shared/Input";
interface PasswordUniqueProps {
minLength?: number;
maxLength?: number;
placeholder?: string;
}
type Props = PasswordUniqueProps & InputProps & UniversalInputProps & NameRequired;
@@ -28,7 +27,6 @@ export function Password(props: Props) {
message: `Your answer musn't be longer than ${props.maxLength} characters`,
},
}}
additionalProps={{ placeholder: props.placeholder }}
{...props}
/>
);
packages/react/src/components/inputs/Phone.tsx
-2
View File
@@ -5,7 +5,6 @@ import { Input, InputProps } from "../shared/Input";
interface PhoneUniqueProps {
minLength?: number;
maxLength?: number;
placeholder?: string;
}
type Props = PhoneUniqueProps & InputProps & UniversalInputProps & NameRequired;
@@ -29,7 +28,6 @@ export function Phone(props: Props) {
message: `Your answer musn't be longer than ${props.maxLength} characters`,
},
}}
additionalProps={{ placeholder: props.placeholder }}
{...props}
/>
);
packages/react/src/components/inputs/Search.tsx
-2
View File
@@ -5,7 +5,6 @@ import { Input, InputProps } from "../shared/Input";
interface SearchUniqueProps {
minLength?: number;
maxLength?: number;
placeholder?: string;
}
type Props = SearchUniqueProps & InputProps & UniversalInputProps & NameRequired;
@@ -28,7 +27,6 @@ export function Search(props: Props) {
message: `Your answer musn't be longer than ${props.maxLength} characters`,
},
}}
additionalProps={{ placeholder: props.placeholder }}
{...props}
/>
);
packages/react/src/components/inputs/Text.tsx
-2
View File
@@ -5,7 +5,6 @@ import { Input, InputProps } from "../shared/Input";
interface TextUniqueProps {
minLength?: number;
maxLength?: number;
placeholder?: string;
}
type Props = TextUniqueProps & InputProps & UniversalInputProps & NameRequired;
@@ -28,7 +27,6 @@ export function Text(props: Props) {
message: `Your answer musn't be longer than ${props.maxLength} characters`,
},
}}
additionalProps={{ placeholder: props.placeholder }}
{...props}
/>
);
packages/react/src/components/inputs/Url.tsx
-2
View File
@@ -5,7 +5,6 @@ import { Input, InputProps } from "../shared/Input";
interface UrlUniqueProps {
minLength?: number;
maxLength?: number;
placeholder?: string;
}
type Props = UrlUniqueProps & InputProps & UniversalInputProps & NameRequired;
@@ -28,7 +27,6 @@ export function Url(props: Props) {
message: `Your answer musn't be longer than ${props.maxLength} characters`,
},
}}
additionalProps={{ placeholder: props.placeholder }}
{...props}
/>
);
packages/react/src/components/shared/Input.tsx
+4 -2
View File
@@ -12,11 +12,12 @@ import { Outer } from "./Outer";
import { Wrapper } from "./Wrapper";
export interface InputProps {
additionalValidation?: any;
additionalProps?: any;
placeholder?: string;
}
interface UniqueProps {
additionalValidation?: any;
additionalProps?: any;
type: {
formbricks: string;
html: string;
@@ -44,6 +45,7 @@ export function Input(props: FormbricksProps) {
type={props.type.html}
id={elemId}
aria-invalid={errors[props.name] ? "true" : "false"}
placeholder={props.placeholder}
{...props.additionalProps}
{...register(props.name, {
required: { value: "required" in validationRules, message: "This field is required" },