mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
56 lines
1.4 KiB
Svelte
56 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
Form,
|
|
FormGroup,
|
|
Checkbox,
|
|
RadioButtonGroup,
|
|
RadioButton,
|
|
Select,
|
|
SelectItem,
|
|
Button,
|
|
} from "carbon-components-svelte";
|
|
|
|
let ref: HTMLFormElement;
|
|
</script>
|
|
|
|
<Form on:submit bind:ref>
|
|
<FormGroup legendText="Checkboxes">
|
|
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
|
|
<Checkbox id="checkbox-1" labelText="Checkbox Label" />
|
|
<Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
|
|
</FormGroup>
|
|
<FormGroup legendText="Radio buttons">
|
|
<RadioButtonGroup selected="default-selected">
|
|
<RadioButton
|
|
id="radio-1"
|
|
value="standard"
|
|
labelText="Standard Radio Button"
|
|
/>
|
|
<RadioButton
|
|
id="radio-2"
|
|
value="default-selected"
|
|
labelText="Default Selected Radio Button"
|
|
/>
|
|
<RadioButton
|
|
id="radio-4"
|
|
value="disabled"
|
|
labelText="Disabled Radio Button"
|
|
disabled
|
|
/>
|
|
</RadioButtonGroup>
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<Select id="select-1" labelText="Select menu">
|
|
<SelectItem
|
|
disabled
|
|
hidden
|
|
value="placeholder-item"
|
|
text="Choose an option"
|
|
/>
|
|
<SelectItem value="option-1" text="Option 1" />
|
|
<SelectItem value="option-2" text="Option 2" />
|
|
<SelectItem value="option-3" text="Option 3" />
|
|
</Select>
|
|
</FormGroup>
|
|
<Button type="submit">Submit</Button>
|
|
</Form>
|