🌟  Exciting news! Try the new Inkline 4, production-ready and incredibly feature-packed.

Form Group

Form groups are the easiest way to add structure and spacing to form elements.

Example

The <i-form-group> component is a wrapper that provides proper grouping of labels, input, help text, and form validation messaging. By default, form groups add spacing between them.

<i-form>
    <i-form-group>
        <i-form-label>Input</i-form-label>
        <i-input v-model="input" placeholder="Type something.." />
    </i-form-group>

    <i-form-group>
        <i-form-label>Textarea</i-form-label>
        <i-textarea v-model="textarea" placeholder="Write a comment.." />
    </i-form-group>
</i-form>

Disabled State

Setting a form group as disabled will cause all of its child form components to be disabled.

<i-form>
    <i-form-group disabled>
        <i-form-label>Input</i-form-label>
        <i-input v-model="input" placeholder="Type something.." />
    </i-form-group>

    <i-form-group disabled>
        <i-form-label>Textarea</i-form-label>
        <i-textarea v-model="textarea" placeholder="Write a comment.." />
    </i-form-group>
</i-form>

Sizes

You’re able to use the size modifier to control the size of the form components inside your <i-form-group>, using one of the available sizes: sm, md, and lg. The default size is set to md.

All of the components inside the <i-form-group> will inherit the parent form group’s size.

<i-form>
    <i-form-group size="sm">
        <i-form-label>Input</i-form-label>
        <i-input v-model="input" placeholder="Type something.." />
    </i-form-group>

    <i-form-group size="sm">
        <i-form-label>Textarea</i-form-label>
        <i-textarea v-model="textarea" placeholder="Write a comment.." />
    </i-form-group>
</i-form>


<i-form>
    <i-form-group size="md">
        <i-form-label>Input</i-form-label>
        <i-input v-model="input" placeholder="Type something.." />
    </i-form-group>

    <i-form-group size="md">
        <i-form-label>Textarea</i-form-label>
        <i-textarea v-model="textarea" placeholder="Write a comment.." />
    </i-form-group>
</i-form>


<i-form>
    <i-form-group size="lg">
        <i-form-label>Input</i-form-label>
        <i-input v-model="input" placeholder="Type something.." />
    </i-form-group>

    <i-form-group size="lg">
        <i-form-label>Textarea</i-form-label>
        <i-textarea v-model="textarea" placeholder="Write a comment.." />
    </i-form-group>
</i-form>

Form Group Nesting

You can nest form groups in order to control the disabled, readonly and size properties of multiple form components at once. All the child inputs of the parent form group will inherit the property.

<i-form>
    <i-form-group>
        <i-form-group>
            <i-form-label>Input</i-form-label>
            <i-input v-model="input" placeholder="Type something.." />
        </i-form-group>

        <i-form-group>
            <i-form-label>Textarea</i-form-label>
            <i-textarea v-model="textarea" placeholder="Write a comment.." />
        </i-form-group>
    </i-form-group>

    <i-form-group>
        <i-checkbox v-model="checkbox">I accept the terms and conditions</i-checkbox>
    </i-form-group>
</i-form>


<i-form>
    <i-form-group disabled>
        <i-form-group>
            <i-form-label>Input</i-form-label>
            <i-input v-model="input" placeholder="Type something.." />
        </i-form-group>

        <i-form-group>
            <i-form-label>Textarea</i-form-label>
            <i-textarea v-model="textarea" placeholder="Write a comment.." />
        </i-form-group>
    </i-form-group>
</i-form>


<i-form>
    <i-form-group readonly>
        <i-form-group>
            <i-form-label>Input</i-form-label>
            <i-input v-model="input" placeholder="Type something.." />
        </i-form-group>

        <i-form-group>
            <i-form-label>Textarea</i-form-label>
            <i-textarea v-model="textarea" placeholder="Write a comment.." />
        </i-form-group>
    </i-form-group>
</i-form>


<i-form>
    <i-form-group size="lg">
        <i-form-group>
            <i-form-label>Input</i-form-label>
            <i-input v-model="input" placeholder="Type something.." />
        </i-form-group>

        <i-form-group>
            <i-form-label>Textarea</i-form-label>
            <i-textarea v-model="textarea" placeholder="Write a comment.." />
        </i-form-group>
    </i-form-group>
</i-form>

Configuration

Props

Use props to modify the component’s design and behavior.

  • Property
    color
    Type'light' | 'dark'
    Default'light'
    Description The color variant of the form group
  • Property
    disabled
    TypeBoolean
    Defaultfalse
    Description The disabled state of the form group
  • Property
    inline
    TypeBoolean
    Defaultfalse
    Description Display the form group as inline
  • Property
    name
    TypeString
    Default''
    Description The identifier of the form group
  • Property
    readonly
    TypeBoolean
    Defaultfalse
    Description The readonly state of the form group
  • Property
    required
    TypeBoolean
    Defaultfalse
    Description The required state of the form group
  • Property
    size
    Type'sm' | 'md' | 'lg'
    Default'md'
    Description The size variant of the form group

Slots

Use slots to insert custom content into well-defined component locations.

  • Property
    default
    Description Slot for default form group content

CSS Variables

Read more about configuring Inkline’s Design System variables to update the look and feel of the component.

  • Property
    ----margin-top
    Valuevar(--margin-top)
    Description The margin top of the form error component