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

docs(fluid-form): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 09:16:56 -07:00
commit bb6f987b02
1 changed files with 11 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

12
docs/src/pages/components/FluidForm.svx
View file

@ -7,9 +7,15 @@
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
The `FluidForm` component provides a fluid-width form layout that adapts to its
container. It's designed for full-width form layouts and works with most Carbon
input components. Note that inline input variants cannot be used within a
`FluidForm`.
## Fluid form ## Fluid form
Note that the `inline` input variants cannot be used within a `FluidForm`. Create a fluid-width form layout using the `FluidForm` component. This example
shows a basic login form with required fields.
<FluidForm> <FluidForm>
<TextInput labelText="User name" placeholder="Enter user name..." required /> <TextInput labelText="User name" placeholder="Enter user name..." required />
@ -23,4 +29,8 @@ Note that the `inline` input variants cannot be used within a `FluidForm`.
## Invalid state ## Invalid state
Handle form validation and display error states using the `invalid` and
`invalidText` props on form inputs. This example demonstrates how to show
validation errors in a fluid form.
<FileSource src="/framed/FluidForm/FluidFormInvalid" /> <FileSource src="/framed/FluidForm/FluidFormInvalid" />