Alert Avatar AvatarGroup Button ButtonGroup Checkbox CheckboxGroup FilePicker Form FormRow Hamburger Input Modal Option Radio RadioGroup Rating Select Spinner Textarea Toast Tooltip Toggle

FormRow

A FormRow is a simple wrapper for placing multiple form elements in a row within a form.

Example

<script>
  import { 
    Checkbox, 
    CheckboxGroup, 
    FormRow, 
    Input, 
    Textarea 
  } from '$lib/ui';
</script>

<FormRow>
  <Input label="First Name" />
  <Input label="Last Name" />
</FormRow>

<FormRow>
  <Textarea label="Bio" />
  <CheckboxGroup label="Preferences">
    <Checkbox label="Likes Spam" />
    <Checkbox label="Welcomes Telemarketers" />
  </CheckboxGroup>
</FormRow>

First Name

Last Name

Bio

Preferences Likes Spam Welcomes Telemarketers

FormRow Component Props

Name	Type	Default	Description
`class`	String		CSS classes declared in global scope can be applied to the outermost element
`...`			Additional props will be passed through to the HTML element enabling support for things like `on:click`, etc

FormRow CSS Custom Properties

Name	Type	Default	Description
`--ui-form-row-gap`	Numeric	`3px`	Flex gap between child elements of FormRow