FormField

Basic

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

›

⌄

⌄

⌄

import { html, atom, renderApp } from 'mates';

import { FormField, InputField } from 'mates-ui';

const App = () => {

const name = atom("");

const email = atom("");

return () => html`

<x-col gap="var(--md-space-5)" style="max-width:24rem;width:100%;">

${FormField({

label: "Full name", labelFor: "pg-name",

helper: "Enter your first and last name.",

control: InputField({ id: "pg-name", placeholder: "Jane Doe", value: name(), onInput: (e) => name.set(e.target.value) }),

})}

${FormField({

label: "Email address", labelFor: "pg-email",

helper: "We'll never share your email.",

control: InputField({ id: "pg-email", type: "email", placeholder: "jane@example.com", value: email(), onInput: (e) => email.set(e.target.value) }),

})}

</x-col>

`;

};

renderApp(App, document.getElementById('app'));

---

Label positions

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

›

⌄

import { html, atom, renderApp } from 'mates';

import { Checkbox, FormField, Text } from 'mates-ui';

const App = () => {

const top = atom(false);

const start = atom(false);

const end = atom(false);

return () => html`

<x-col gap="var(--md-space-5)" style="max-width:28rem;width:100%;">

<x-col gap="var(--md-space-2)">

${Text("top (default)", { type: "label-sm", color: "muted" })}

${FormField({ label: "Subscribe to newsletter", labelPosition: "top", control: Checkbox({ checked: top(), onChange: (e) => top.set(e.target.checked) }) })}

</x-col>

<x-col gap="var(--md-space-2)">

${Text("start", { type: "label-sm", color: "muted" })}

${FormField({ label: "Subscribe to newsletter", labelPosition: "start", control: Checkbox({ checked: start(), onChange: (e) => start.set(e.target.checked) }) })}

</x-col>

<x-col gap="var(--md-space-2)">

${Text("end", { type: "label-sm", color: "muted" })}

${FormField({ label: "Subscribe to newsletter", labelPosition: "end", control: Checkbox({ checked: end(), onChange: (e) => end.set(e.target.checked) }) })}

</x-col>

</x-col>

`;

};

renderApp(App, document.getElementById('app'));

---

Error state

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

›

⌄

⌄

import { html, atom, renderApp } from 'mates';

import { FormField, InputField } from 'mates-ui';

const App = () => {

const email = atom("");

return () => html`

<x-col style="max-width:24rem;width:100%;">

${FormField({

label: "Email address", labelFor: "pg-err-email",

error: email().length > 0 && !email().includes("@") ? "Please enter a valid email address." : false,

control: InputField({ id: "pg-err-email", type: "email", placeholder: "jane@example.com", value: email(), onInput: (e) => email.set(e.target.value) }),

})}

</x-col>

`;

};

renderApp(App, document.getElementById('app'));

---

Required

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

›

⌄

⌄

⌄

import { html, atom, renderApp } from 'mates';

import { Checkbox, FormField, InputField } from 'mates-ui';

const App = () => {

const name = atom("");

const agreed = atom(false);

return () => html`

<x-col gap="var(--md-space-5)" style="max-width:24rem;width:100%;">

${FormField({

label: "Full name", labelFor: "pg-req-name", required: true,

helper: "This field is required.",

control: InputField({ id: "pg-req-name", placeholder: "Jane Doe", value: name(), onInput: (e) => name.set(e.target.value) }),

})}

${FormField({

label: "I agree to the terms", labelPosition: "end", required: true,

control: Checkbox({ checked: agreed(), onChange: (e) => agreed.set(e.target.checked) }),

})}

</x-col>

`;

};

renderApp(App, document.getElementById('app'));

---

Hint

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

›

⌄

⌄

⌄

import { html, atom, renderApp } from 'mates';

import { FormField, InputField } from 'mates-ui';

const App = () => {

const key = atom("");

const user = atom("");

return () => html`

<x-col gap="var(--md-space-5)" style="max-width:24rem;width:100%;">

${FormField({

label: "API key", labelFor: "pg-hint-api",

hint: "Your API key is visible in your account settings. Keep it secret.",

control: InputField({ id: "pg-hint-api", placeholder: "sk-…", value: key(), onInput: (e) => key.set(e.target.value) }),

})}

${FormField({

label: "Username", labelFor: "pg-hint-user",

hint: html`<span style="font-size:var(--md-text-xs);color:var(--md-color-text-muted);">Only letters, numbers, and underscores. Max 30 chars.</span>`,

control: InputField({ id: "pg-hint-user", placeholder: "jane_doe", value: user(), onInput: (e) => user.set(e.target.value) }),

})}

</x-col>

`;

};

renderApp(App, document.getElementById('app'));

---

Disabled

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

›

⌄

⌄

import { html, renderApp } from 'mates';

import { Checkbox, FormField, InputField } from 'mates-ui';

const App = () => () => html`

<x-col gap="var(--md-space-5)" style="max-width:24rem;width:100%;">

${FormField({

label: "Account email", labelFor: "pg-dis-email",

helper: "Contact support to change your email.",

disabled: true,

control: InputField({ id: "pg-dis-email", value: "locked@example.com", disabled: true }),

})}

${FormField({

label: "Receive marketing emails", labelPosition: "end", disabled: true,

control: Checkbox({ checked: false, disabled: true }),

})}

</x-col>

`;

renderApp(App, document.getElementById('app'));