Svelte Svelte
search ⌘K

Svelte • Template syntax

class

On this page

There are two ways to set classes on elements: the class attribute, and the class: directive.

Attributes

Primitive values are treated like any other attribute:

<div class={large ? 'large' : 'small'}>...</div>

For historical reasons, falsy values (like false and NaN) are stringified (class="false"), though class={undefined} (or null) cause the attribute to be omitted altogether. In a future version of Svelte, all falsy values will cause class to be omitted.

Objects and arrays

Since Svelte 5.16, class can be an object or array, and is converted to a string using clsx.

If the value is an object, the truthy keys are added:

<script lang="ts">
	let { let cool: anycool } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<!-- results in `class="cool"` if `cool` is truthy,
     `class="lame"` otherwise -->
<div class={{ cool: anycool, lame: booleanlame: !let cool: anycool }}>...</div>
<script>
	let { let cool: anycool } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<!-- results in `class="cool"` if `cool` is truthy,
     `class="lame"` otherwise -->
<div class={{ cool: anycool, lame: booleanlame: !let cool: anycool }}>...</div>

If the value is an array, the truthy values are combined:

<!-- if `faded` and `large` are both truthy, results in
     `class="saturate-0 opacity-50 scale-200"` -->
<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>

Note that whether we’re using the array or object form, we can set multiple classes simultaneously with a single condition, which is particularly useful if you’re using things like Tailwind.

Arrays can contain arrays and objects, and clsx will flatten them. This is useful for combining local classes with props, for example:

<script lang="ts">
	let let props: anyprops = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<button {...let props: anyprops} class={['cool-button', let props: anyprops.class]}>
	{@render let props: anyprops.children?.()}
</button>
<script>
	let let props: anyprops = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<button {...let props: anyprops} class={['cool-button', let props: anyprops.class]}>
	{@render let props: anyprops.children?.()}
</button>

The user of this component has the same flexibility to use a mixture of objects, arrays and strings:

<script lang="ts">
	import 
type Button = SvelteComponent<Record<string, any>, any, any>
const Button: LegacyComponentType
Button from './Button.svelte';
	let let useTailwind: booleanuseTailwind = 
function $state<false>(initial: false): false (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<false>(initial: false): false (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state(false);
</script>

<const Button: LegacyComponentTypeButton
	onclick={() => let useTailwind: booleanuseTailwind = true}
	class={{ 'bg-blue-700 sm:w-1/2': let useTailwind: booleanuseTailwind }}
>
	Accept the inevitability of Tailwind
</Button>
<script>
	import 
type Button = SvelteComponent<Record<string, any>, any, any>
const Button: LegacyComponentType
Button from './Button.svelte';
	let let useTailwind: booleanuseTailwind = 
function $state<false>(initial: false): false (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<false>(initial: false): false (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state(false);
</script>

<const Button: LegacyComponentTypeButton
	onclick={() => let useTailwind: booleanuseTailwind = true}
	class={{ 'bg-blue-700 sm:w-1/2': let useTailwind: booleanuseTailwind }}
>
	Accept the inevitability of Tailwind
</Button>

Since Svelte 5.19, Svelte also exposes the ClassValue type, which is the type of value that the class attribute on elements accept. This is useful if you want to use a type-safe class name in component props:

<script lang="ts">
	import type { type ClassValue = string | ClassArray | ClassDictionaryClassValue } from 'svelte/elements';

	const const props: $$ComponentPropsprops: { class: ClassValueclass: type ClassValue = string | ClassArray | ClassDictionaryClassValue } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<div class={['original', const props: $$ComponentPropsprops.class: ClassValueclass]}>...</div>

The class: directive

Prior to Svelte 5.16, the class: directive was the most convenient way to set classes on elements conditionally.

<!-- These are equivalent -->
<div class={{ cool, lame: !cool }}>...</div>
<div class:cool={cool} class:lame={!cool}>...</div>

As with other directives, we can use a shorthand when the name of the class coincides with the value:

<div class:cool class:lame={!cool}>...</div>

Unless you’re using an older version of Svelte, consider avoiding class:, since the attribute is more powerful and composable.

Edit this page on GitHub llms.txt