Fieldset

<arc-fieldset legend="Contact info" description="We'll use this to reach you.">
  <arc-label for="email" required>Email</arc-label>
  <arc-input id="email" type="email" placeholder="you@example.com"></arc-input>

  <arc-label for="phone">Phone</arc-label>
  <arc-input id="phone" type="tel" placeholder="(555) 123-4567"></arc-input>
</arc-fieldset>

<!-- Card variant with error -->
<arc-fieldset legend="Preferences" variant="card" error="Please select at least one option.">
  <arc-checkbox label="Option A"></arc-checkbox>
  <arc-checkbox label="Option B"></arc-checkbox>
</arc-fieldset>

import { Fieldset, Label, Input, Checkbox } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <Fieldset legend="Contact info" description="We'll use this to reach you.">
      <Label htmlFor="email" required>Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
      <Label htmlFor="phone">Phone</Label>
      <Input id="phone" type="tel" placeholder="(555) 123-4567" />
    </Fieldset>
  );
}

<script setup>
import { Fieldset, Label, Input } from '@arclux/arc-ui-vue';
</script>

<template>
  <Fieldset legend="Contact info" description="We'll use this to reach you.">
    <Label for="email" required>Email</Label>
    <Input id="email" type="email" placeholder="you@example.com" />
  </Fieldset>
</template>

<script>
  import { Fieldset, Label, Input } from '@arclux/arc-ui-svelte';
</script>

<Fieldset legend="Contact info" description="We'll use this to reach you.">
  <Label for="email" required>Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</Fieldset>

import { Component } from '@angular/core';
import { Fieldset, Label, Input } from '@arclux/arc-ui-angular';

@Component({
  imports: [Fieldset, Label, Input],
  template: `
    <arc-fieldset legend="Contact info" description="We'll use this to reach you.">
      <arc-label for="email" required>Email</arc-label>
      <arc-input id="email" type="email" placeholder="you@example.com" />
    </arc-fieldset>
  `,
})
export class ContactForm {}

import { Fieldset, Label, Input } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <Fieldset legend="Contact info" description="We'll use this to reach you.">
      <Label for="email" required>Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </Fieldset>
  );
}

import { Fieldset, Label, Input } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <Fieldset legend="Contact info" description="We'll use this to reach you.">
      <Label for="email" required>Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </Fieldset>
  );
}

<!-- Use native <fieldset> and <legend> -->
<fieldset class="arc-fieldset" style="border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px 24px 24px;">
  <legend style="font-weight: 600; color: var(--text-primary); padding: 0 4px;">Contact info</legend>
  <p style="font-size: 14px; color: var(--text-muted);">We'll use this to reach you.</p>
  <!-- inputs here -->
</fieldset>

<fieldset style="border: 1px solid rgb(42, 42, 52); border-radius: 10px; padding: 16px 24px 24px; margin: 0;">
  <legend style="font-weight: 600; color: rgb(224, 224, 232); padding: 0 4px;">Contact info</legend>
  <!-- inputs here -->
</fieldset>