Fieldset

import { Field, FieldLabel, Fieldset, FieldsetLegend, Input } from "@smallest-inc/ui";

export default function FieldsetDefault() {
  return (
    <Fieldset className="w-full max-w-xs">
      <FieldsetLegend>Business details</FieldsetLegend>
      <Field>
        <FieldLabel>Business name</FieldLabel>
        <Input placeholder="Northwind Dental" />
      </Field>
      <Field>
        <FieldLabel>
          Website <span className="font-normal text-fg-secondary">Optional</span>
        </FieldLabel>
        <Input placeholder="example.com" />
      </Field>
    </Fieldset>
  );
}

import { Fieldset, FieldsetLegend, SliderField } from "@smallest-inc/ui";

export default function FieldsetSliders() {
  return (
    <Fieldset className="w-full max-w-xs">
      <FieldsetLegend>Voice</FieldsetLegend>
      <SliderField label="Speaking speed" unit="×" min={0.5} max={2} step={0.1} defaultValue={1} />
      <SliderField label="Stability" unit="%" min={0} max={100} defaultValue={70} />
      <SliderField label="Interruption sensitivity" mode="dots" min={0} max={4} defaultValue={2} />
    </Fieldset>
  );
}

import { Checkbox, Fieldset, FieldsetLegend } from "@smallest-inc/ui";

export default function FieldsetChoices() {
  return (
    <Fieldset>
      <FieldsetLegend>Send call summaries to</FieldsetLegend>
      <div className="flex flex-col gap-3">
        <Checkbox defaultChecked>Email</Checkbox>
        <Checkbox>Slack</Checkbox>
        <Checkbox>Webhook</Checkbox>
      </div>
    </Fieldset>
  );
}

import { Field, FieldLabel, Fieldset, FieldsetLegend, Input } from "@smallest-inc/ui";

export default function FieldsetDisabled() {
  return (
    <Fieldset className="w-full max-w-xs" disabled>
      <FieldsetLegend>Billing address</FieldsetLegend>
      <Field>
        <FieldLabel>Company</FieldLabel>
        <Input defaultValue="Northwind Dental" />
      </Field>
      <Field>
        <FieldLabel>Country</FieldLabel>
        <Input defaultValue="United States" />
      </Field>
    </Fieldset>
  );
}