import {Input,FloatInput,Radio,LayoutRadio,Checkbox,Range,Toggle} from '@simple-svelte-ui/forms@latest'

let name = 'world';

const radio = [

"radio1",

"radio2"

]

const layout=[{

name:"Name",

desc:"Decsription",

img:'https://raw.githubusercontent.com/atisawd/boxicons/master/svg/logos/bxl-500px.svg'

}]

</script>

<h3>Checkbox Inputs</h3>

<Checkbox>Primary</Checkbox>

<Checkbox color="secondary">Secondary</Checkbox>

<Checkbox color="success">Success</Checkbox>

<Checkbox color="error">Error</Checkbox>

<Checkbox color="warning">Warning</Checkbox>

<Checkbox color="info">Info</Checkbox>

<Checkbox color="disabled" checked >Disabled and checked</Checkbox>

<h3>Normal Input</h3>

<Input placeholder="Default input"/>

<Input placeholder="no outline input" outline={false} />

<Input placeholder=" Password input disabled" icon="bx bx-lock" color="disabled" type="password" outline={false} />

<Input placeholder=" Password input with icon" color="success" icon="bx bx-upload" type="file" outline={false} />

<br/>

<h3>Floating Input</h3>

<FloatInput label="User name"/>

<FloatInput label="Password" type="password" outline={false}/>

<FloatInput label="Password" color="disabled" outline={false}/>