Fieldset

<script lang="ts">
  import { Fieldset, Legend, Field, Description, Label } from '$lib/components/fieldset';
  import { TextInput } from '$lib/components/input';
  import { Textarea } from '$lib/components/textarea';
  import { Select, SelectTrigger, SelectContent, SelectItem } from '$lib/components/select';
 
  const roles = [
    { value: 'developer', label: 'Developer' },
    { value: 'designer', label: 'Designer' },
    { value: 'manager', label: 'Manager' },
    { value: 'other', label: 'Other' }
  ];
</script>

<Fieldset class="fieldset">
  <Legend>Account Information</Legend>
  <Description>Please provide your account details.</Description>
  <Field>
    <Label for="full_name">Full Name</Label>
    <TextInput id="full_name" placeholder="Enter your full name" />
  </Field>
  <Field>
    <Label for="email">Email</Label>
    <TextInput id="email" type="email" placeholder="Enter your email" />
  </Field>
  <Field>
    <Label>Role</Label>
    <Select>
      <SelectTrigger placeholder="Assign role" />
      <SelectContent>
        {#each roles as role}
          <SelectItem value={role.value} label={role.label}>
            {role.label}
          </SelectItem>
        {/each}
      </SelectContent>
    </Select>
  </Field>
  <Field>
    <Label for="bio">Bio</Label>
    <Textarea id="bio" placeholder="Enter your bio" />
  </Field>
</Fieldset>