mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(form): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 09:18:09 -07:00
commit 90ea699848
1 changed files with 10 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
docs/src/pages/components/Form.svx
View file

@ -14,8 +14,15 @@ components: ["Form", "FormGroup"]
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
The `Form` component provides a structured way to collect user input. It works with
various form controls like checkboxes, radio buttons, and select menus. The
`FormGroup` component helps organize related form controls with a legend.
## Form ## Form
Create a form with grouped controls using `Form` and `FormGroup`. This example
shows a form with checkboxes, radio buttons, and a select menu.
<Form on:submit> <Form on:submit>
<FormGroup legendText="Checkboxes"> <FormGroup legendText="Checkboxes">
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked /> <Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
@ -63,7 +70,9 @@ components: ["Form", "FormGroup"]
## Prevent default behavior ## Prevent default behavior
The forwarded `submit` event is not modified. Use `e.preventDefault()` to prevent the native form submission behavior. Handle form submission by preventing the default browser behavior. Use
`e.preventDefault()` to stop the native form submission and handle the event
programmatically.
<Form on:submit={e => { <Form on:submit={e => {
e.preventDefault(); e.preventDefault();